在前端开发中，我们常常需要在页面上添加链接，一些链接是指向本网站内部的，而另一些链接则是指向其他网站的。在添加外部链接时，我们可能会遇到一些问题，比如如何让链接在新窗口或新标签页中打开等等。npm 包 external-links 正是为解决这些问题而设计的。在本篇文章中，我们将介绍 npm 包 external-links 的使用教程，并提供示例代码。
安装 external-links 包
我们首先需要使用 npm 包管理器安装 external-links 包。在命令行中输入以下命令：
--- ------- ------ --------------
使用 external-links 包
使用 external-links 包很简单。只需在 JavaScript 文件中导入 external-links 包并调用该包中的函数即可。下面是一个简单的例子：
------ - ------------- - ---- ----------------- ----------------
这个例子中，我们使用 import 语句导入 external-links 包，并调用 externalLinks 函数。这个函数会寻找所有页面上的外部链接，将这些链接的 target 属性设置为 "_blank"，这样就可以在新窗口或新标签页中打开链接。
external-links 包提供的选项
external-links 包还提供了一些选项，可以使我们更加灵活地控制其行为。下面是一些常用选项的示例：
域名过滤
你可能不希望所有的外部链接都打开在新窗口或新标签页中。在这种情况下，你可以通过指定允许的域名列表来控制 external-links 包的行为。下面是一个用于过滤 domain.com 和 sub.domain.com 的例子：
------ - ------------- - ---- ----------------- --------------- -------- -------------- ----------------- ---
包含 id 属性的链接过滤
external-links 包默认会忽略所有带有 id 属性的链接，这些链接通常用于页面内部导航。如果你希望打开这些链接，可以使用 includeIds 选项。下面是一个包含 includeIds 选项的示例：
------ - ------------- - ---- ----------------- --------------- ----------- ---- ---
排除特定链接的过滤
如果你想排除某些链接，比如社交媒体链接或某些特定链接，可以使用 excludeLinks 选项。下面是一个排除包含 "facebook.com" 和 "linkedin.com" 域名的链接的示例代码：
------ - ------------- - ---- ----------------- --------------- ------------- ----------------- ---------------- ---
综合示例
下面是一个综合使用 external-links 包的示例代码：
------ - ------------- - ---- ----------------- --------------- -------- -------------- ------------------ ----------- ----- ------------- ----------------- ---------------- ---
在这个示例中，我们使用了 domains 选项来设定不希望打开在新窗口或新标签页中的外部链接。我们同时还使用了 includeIds 选项来打开包含 id 属性的链接，以及 excludeLinks 选项来排除我们不希望被打开的链接。
总结
npm 包 external-links 可以帮助我们更加灵活地控制网页上的外部链接。我们可以通过该包提供的选项来过滤特定链接、指定允许的域名列表、打开包含 id 属性的链接等等。在使用 external-links 包时，我们只需要导入该包并调用相应的函数即可。本篇文章提供了详细的使用教程，并提供了示例代码，希望对您学习和使用 external-links 包有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600573a481e8991b448e99ef