在前端开发中，经常需要从大量的文本内容中提取出链接，用于展示、处理或者其他操作。而手动过滤这些链接会非常繁琐，也容易出错。因此，我们可以借助 npm 包 link-finder 来帮助我们自动提取链接，并且还支持多种链接类型，使用也非常简单。
安装 link-finder
使用 npm 可以快速安装 link-finder。
npm install link-finder --save
使用 link-finder
安装好 link-finder 后，我们就可以在代码中引入这个包，并调用提取链接的函数。
引入 link-finder
在代码中引入 link-finder 非常简单，只需要在需要使用的文件中加入以下代码即可。
const linkFinder = require('link-finder');提取链接
link-finder 提供了多种类型的链接提取功能，包括：
- http、https 链接
- email 链接
- 地址信息（如邮政编码、电话号码等）
下面以提取 http、https 链接为例。
-- -------------------- ---- ------- ----- ---------- - ----------------------- -- ------ ----- ---- - ---------------------------------- ------------- -- ------- ----- ----- - ------------------------------------ -- -- ---------------- ----- ----- - --------------------- ------- ------------------- -- - ----------------------- -
由上述代码可以看出，使用 link-finder 提取链接非常简单，只需要定义好正则表达式，然后调用 linkFinder.find() 函数即可。
示例应用
下面提供一个示例应用，展示 link-finder 的使用场景。
假设我们有一个文本域，需要从中提取出 http、https 链接，并在页面上展示出来。我们可以通过以下代码来实现。
<!-- HTML --> <textarea id="text"></textarea> <button id="link-btn">提取链接</button> <ul id="link-list"></ul>
-- -------------------- ---- -------
-- ----------
----- ---------- - -----------------------
----- -------- - --------------------------------
----- ------- - ------------------------------------
----- -------- - -------------------------------------
-- ---------
--------------------------------- -- -- -
----- ---- - ---------------
----- ----- - ------------------------------------
----- ----- - --------------------- -------
-- --------
------------------ - ---
-------------------- -- -
----- -- - -----------------------------
----- - - ----------------------------
------ - -----
-------- - ---------
------------- - -----
------------------
-------------------------
---
---通过以上代码，我们可以将页面中的链接提取出来，并在页面上用列表的方式展示链接。而且，使用 link-finder 的方法非常简单，能够大大提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551c681e8991b448cf271
