npm 包 linkify-it 使用教程

阅读时长 5 分钟读完

在前端开发中,链接转换成超链接是一个很常见的需求。而 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

纠错
反馈

纠错反馈