在前端开发中，链接转换成超链接是一个很常见的需求。而 linkify-it 就是一个非常优秀的链接检测和转换工具，在实现这个功能时常常使用，使用它可以非常方便地将一段文本中的链接转换成超链接。
linkify-it 概述
linkify-it 是一个轻量级的 JavaScript 库，用于检测、解析和转换文本中出现的链接。不同于其它库，linkify-it 支持原地解析整个字符串而不会由于处理中断错误而停止执行，同时提供大量钩子（Hooks）来方便定制自己的行为表现。
linkify-it 可以识别如下链接模式：
- URL:
http://example.com,mailto:test@example.com,ftp://ftp.example.com,//example.com,www.example.com,example.com, etc. - IDN:
xn--e1aybc.xn--p1ai,äß.com, etc. - TLD:
http://example.com.uk,http://example.community, etc. - Usernames:
@username - Hashtags, Twitter-style:
#hashtag
linkify-it 的使用
安装 linkify-it
首先，需要在项目中安装 linkify-it 包，使用 npm 可以通过以下命令来进行安装：
--- ------- ---------- ------
示例代码
以下是一个简单的示例代码，可以转换输入的文本中的链接成超链接：
----- --------- - ---------------------- -- -- ------- -- ---------- ----- ------- - ------------ ------- ------------ -------- -- -------- --- ------ ---- ---- ---------------- ------ -------- -- -- --- -- ----- ---- - -------------- ------------------ - ----------------------- ----- ------ - -------------------- --------------------
运行代码后输出的 result 将会是一个数组，包含文本中所有的链接。
API
linkify-it 提供了一些便捷的 API，以下是常用的几个 API：
- linkifyIt(raw, options): 构建一个 linkify-it 实例。第一个参数为输入的字符串，第二个参数为配置选项。
- add(pattern, schema): 添加识别规则，第一个参数为规则的正则表达式，第二个参数为解析后的模式。
- set(options): 设置 linkify-it 的配置选项。例如可以设置是否识别邮件地址，是否开启 IPv6 支持等。
- tlds(arr): 添加 TLDs（顶级域名），将指定 TLDs 中的域名视为合法的链接。
- match(str): 将输入字符串进行解析，返回所有解析出来的匹配项。
- test(str): 测试字符串中是否包含了一个链接，如果包含则返回 true，否则返回 false。
- normalize(str): 将输入字符串中的链接规范化成一个通用的格式。
更详细的 API 可以查看 官方文档。
配置选项
linkify-it 的常用配置选项主要包括：
- fuzzyLink: 开启「强制链接」的策略。默认情况下，linkify-it 仅链接众所周知的协议，启用此选项后，随意的文本将被视为链接。
- fuzzyEmail: 启用「强制邮件地址」的策略。
- fuzzyIP: 启用 IPv6 支持。
- tlds: 预定义 TLDs（顶级域名）。
自定义模式
linkify-it 可以很方便的自定义链接模式，只需要通过 add API 实现即可。例如下面这段代码将 git: 协议的链接全部替换为 http: 协议：
------------------- ---------
更详细的自定义模式可以查看 官方文档。
linkify-it 的优势
与其他类似工具相比，linkify-it 在以下方面具有优势：
- 解析速度高：和其他解析链接 href 的工具相比，linkify-it 的速度是非常快的。
- 识别的可扩展性：可以根据自身的需求扩展新的规则或修改它的现有规则。
- 较强的鲁棒性：针对某些较特殊的场景，它也能够对应处理。
总结
linkify-it 提供了一种轻量级、高效、易于使用的方法，能够帮助前端开发者快速、准确地将文本中的链接解析成超链接。通过学习本文提供的 linkify-it 使用教程，希望可以对 linkify-it 的使用多一些了解，从而更好的优化和提高前端项目的现有功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/61980