在前端开发中,链接转换成超链接是一个很常见的需求。而 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 可以通过以下命令来进行安装:
npm install linkify-it --save
示例代码
以下是一个简单的示例代码,可以转换输入的文本中的链接成超链接:
-- -------------------- ---- ------- ----- --------- - ---------------------- -- -- ------- -- ---------- ----- ------- - ------------ ------- ------------ -------- -- -------- --- ------ ---- ---- ---------------- ------ -------- -- -- --- -- ----- ---- - -------------- ------------------ - ----------------------- ----- ------ - -------------------- --------------------展开代码
运行代码后输出的 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.add('git:', 'http:');
更详细的自定义模式可以查看 官方文档。
linkify-it 的优势
与其他类似工具相比,linkify-it 在以下方面具有优势:
- 解析速度高:和其他解析链接 href 的工具相比,linkify-it 的速度是非常快的。
- 识别的可扩展性:可以根据自身的需求扩展新的规则或修改它的现有规则。
- 较强的鲁棒性:针对某些较特殊的场景,它也能够对应处理。
总结
linkify-it 提供了一种轻量级、高效、易于使用的方法,能够帮助前端开发者快速、准确地将文本中的链接解析成超链接。通过学习本文提供的 linkify-it 使用教程,希望可以对 linkify-it 的使用多一些了解,从而更好的优化和提高前端项目的现有功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/61980