在前端开发中，很多时候需要从字符串或者文本中提取所有的 URL。这时候可以使用一个非常方便的 npm 包 get-urls。本文将介绍如何使用该 npm 包，旨在帮助读者快速了解其使用方法、深入理解其原理，并提供一些实用例子。
get-urls 安装和使用
使用 npm 安装 get-urls：
npm install get-urls
使用示例：
const getUrls = require('get-urls'); const text = 'Hello, this is a demo text with an URL https://www.google.com'; const urls = getUrls(text); console.log(urls);
代码输出：
Set { 'https://www.google.com' }
可以看出，get-urls 直接返回一个 Set 对象，该对象是 ES6 中新引入的一个集合类型，它可以存放任何类型的唯一值。
上面的示例是最简单的用法。但是，实际应用中很可能涉及到一些特殊情况，比如以下情况：
- 文本中可能包含重复的 URL，而我们只想获取不同的 URL
- 文本中的 URL 可能是相对地址或者包含分段锚点
- 文本中的 URL 可能包含一些带有语义的解释性文本，而我们只想获取和处理 URL 部分
下面我们将详细说明如何应对这种情况。
不获取重复的 URL
前面提到，get-urls 会直接返回一个 Set 对象，它可以存储不重复的 URL。如果我们想只获取不重复的 URL，而不是一个 Set 对象，可以使用以下代码：
const uniqueUrls = [...new Set(getUrls(text))];
这里简单说明一下：使用 ... 将 Set 对象转换为数组，再使用 Set 来去重。
处理其他类型的 URL
默认情况下，get-urls 只能处理 HTTP、HTTPS、FTP 类型的 URL。如果需要处理其他类型的 URL，可以使用 options 中的 extractFromQueryString，在查询参数中查找 URL。
例如，文本中包含了 tel 链接：
const text = '请联系我们：0512-12345678 或拨打 tel: 18912345678'; const urls = getUrls(text, { extractFromQueryString: true, }); console.log(urls);
输出结果：
Set { 'tel:18912345678' }
获取 URL 的简单模式
有时候，我们并不需要文本的全部信息，只需要取到所需的 URL 部分。
在简单情况下，我们可以使用正则表达式来提取 URL。
const urls = text.match(/\bhttps?:\/\/\S+/gi);
但是，当文本中的 URL 包含分段锚点等特殊情况时，正则表达式很难写出完整且简单的逻辑。
这时候，get-urls 提供了一个 nonStrictRegExp 选项，它将返回一个支持快速提取 URL 的正则表达式。下面是示例代码：
const text = '这里是不包含 http/https 前缀的 URL www.google.com 或者 https://www.bing.com#section1'; const urls = getUrls(text, { strict: false, nonStrictRegExp: true, }); console.log(urls);
输出结果：
Set { 'www.google.com', 'https://www.bing.com#section1' }
可以看到，get-urls 会将正确的 URL 提取出来，并且不包括一些明显不是 URL 的文本。
终极实战：配合 fetch 和 Promise.all 使用
有了 get-urls，我们就可以方便地在多个 Web 页面中获取所有的链接。
示范代码：
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ----- - ---------------------- -- ------ ----- ----------- - - ------------------------- ----------------------- --------------------- -- -- --------- ----- ------------- - --------------------- -- - ------ ---------- ---------------- -- ---------------- ------------ -- - ----- ---- - -------------- ----------------- ----- -- ------- ------------------- ------ -- -------------- -- - --------------------- -- ----- -------- ------- --- --- -- --------- -------------------------- -------- -- - ---------------- ---- -- ------------- - ---------- - ----- ---------- -- ----------------------展开代码
这里，我们使用了 fetch 函数异步抓取每个页面，并使用 Promise.all 来等待全部抓取完成后进行统计。
总结
本文介绍了如何使用 npm 包 get-urls，以便快速方便地从多个文本中提取 URL。
我们还深入探讨了该包的特点和用法。我们解决了一些特殊情况，例如：
- 不获取重复的 URL
- 处理其他类型的 URL
- 获取 URL 的简单模式
最后，我们给出了一个实用的示例，展示了如何配合 fetch 和 Promise.all 使用 get-urls。
我们相信，这些技巧和实践，都将为读者的日常开发工作提供极大的帮助与指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111118
