在前端开发中，很多时候需要从字符串或者文本中提取所有的 URL。这时候可以使用一个非常方便的 npm 包 get-urls。本文将介绍如何使用该 npm 包，旨在帮助读者快速了解其使用方法、深入理解其原理，并提供一些实用例子。
get-urls 安装和使用
使用 npm 安装 get-urls：
--- ------- --------
使用示例：
----- ------- - -------------------- ----- ---- - ------- ---- -- - ---- ---- ---- -- --- ------------------------ ----- ---- - -------------- ------------------
代码输出：
--- - ------------------------ -
可以看出，get-urls 直接返回一个 Set 对象，该对象是 ES6 中新引入的一个集合类型，它可以存放任何类型的唯一值。
上面的示例是最简单的用法。但是，实际应用中很可能涉及到一些特殊情况，比如以下情况：
- 文本中可能包含重复的 URL，而我们只想获取不同的 URL
- 文本中的 URL 可能是相对地址或者包含分段锚点
- 文本中的 URL 可能包含一些带有语义的解释性文本，而我们只想获取和处理 URL 部分
下面我们将详细说明如何应对这种情况。
不获取重复的 URL
前面提到，get-urls 会直接返回一个 Set 对象，它可以存储不重复的 URL。如果我们想只获取不重复的 URL，而不是一个 Set 对象，可以使用以下代码：
----- ---------- - ------- --------------------
这里简单说明一下：使用 ... 将 Set 对象转换为数组，再使用 Set 来去重。
处理其他类型的 URL
默认情况下，get-urls 只能处理 HTTP、HTTPS、FTP 类型的 URL。如果需要处理其他类型的 URL，可以使用 options 中的 extractFromQueryString，在查询参数中查找 URL。
例如，文本中包含了 tel 链接：
----- ---- - -------------------- --- ---- ------------- ----- ---- - ------------- - ----------------------- ----- --- ------------------
输出结果：
--- - ----------------- -
获取 URL 的简单模式
有时候，我们并不需要文本的全部信息，只需要取到所需的 URL 部分。
在简单情况下，我们可以使用正则表达式来提取 URL。
----- ---- - ---------------------------------
但是，当文本中的 URL 包含分段锚点等特殊情况时，正则表达式很难写出完整且简单的逻辑。
这时候，get-urls 提供了一个 nonStrictRegExp 选项，它将返回一个支持快速提取 URL 的正则表达式。下面是示例代码：
----- ---- - ------- ---------- --- --- -------------- -- ------------------------------- ----- ---- - ------------- - ------- ------ ---------------- ----- --- ------------------
输出结果：
--- - ----------------- ------------------------------- -
可以看到，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