简介
在前端开发中，链接地址是非常常见的内容。为了给这些链接地址增加一些特效或者样式，我们需要对这些链接进行处理。一些常见的链接处理方式包括给链接增加下划线、另起一行、加粗等等。这些操作可以通过 JavaScript 来实现。但是如果每次都手写这段代码，不仅浪费时间，而且还容易出现错漏。
幸运的是，我们可以使用一个开源的 npm 包来处理链接，那就是 anchorme。
anchorme 是一个处理链接的 npm 包，它可以将文本中的链接转化为 HTML 链接。anchorme 会检测一段文本中的链接，然后将它们包装成 HTML 链接。
安装
通过 npm 安装 anchorme：
--- ------- -------- ------
使用方式
在项目中引入 anchorme：
----- -------- - ----------------------------
使用 anchorme 处理链接：
----- ---- - ------------------------ ----- ----- - ---------------
links 的值将是下面的字符串：
--------- ---------------------------- --------------- ------------- ------------------------------
同时，anchorme 还支持多种配置选项，以及回调函数等扩展功能。下面我们将详细介绍如何使用这些功能。
配置选项
anchorme 提供了多种配置选项，这里介绍其中比较常用的几个：
options.list
list 选项指定了如何处理多个链接。默认情况下，anchorme 会将所有链接拼接成一条字符串返回。如果设置了 list 选项，anchorme 会将链接包装在一个列表中。
例如：
----- ---- - --------------------------------------------- ----- ----- - -------------- - ----- ---- ---
links 的值将是下面的字符串：
----
----
--------- ---------------------------- --------------- ------------- ------------------------------
-----
----
--------- --------------------------- --------------- ------------- -----------------------------
-----
-----options.attributes
attributes 选项指定了链接元素的属性。它是一个对象，属性名是属性名，属性值是属性值。
例如：
----- ---- - ------------------------
----- ----- - -------------- -
----------- -
------ -------
------ ---------
--
---links 的值将是下面的字符串：
--------- ---------------------------- --------------- ------------- ----------- ------------ ---------------------------------
options.protocol
protocol 选项指定了默认的协议。默认情况下，如果链接中没有指定协议，anchorme 会使用当前页面的协议。如果设置了 protocol 选项，anchorme 会使用指定的协议。
例如：
----- ---- - -------------------- ----- ----- - -------------- - --------- ------- ---
links 的值将是下面的字符串：
--------- ------------------------- --------------- ------------- --------------------------
除了 configurator 之外，anchorme 还提供了其他的配置选项，比如针对某些链接的匹配模式、忽略某些链接等。
扩展功能
anchorme 还提供了一些扩展功能，比如回调函数等。
回调函数
anchorme 支持传入一个回调函数，用于对链接进行处理。回调函数接收一个参数，表示链接的信息（包括链接的 URL，开始和结束位置等信息），返回一个字符串，表示链接的 HTML 代码。
例如：
----- ---- - ------------------------ ----- ----- - -------------- - --------- ------ -- --- ------------------------- --------------- ------------------------------ ---
links 的值将是下面的字符串：
--------- ---------------------------- --------------- -------------------------------
缓存匹配结果
如果需要对链接进行反复处理，可以使用缓存机制，以避免重复的匹配过程。
----- ---- - ------------------------ ----- ----- - -------------- - ------ ---- ---
示例代码
下面是一个使用 anchorme 处理链接的示例代码：
----- -------- - ----------------------------
----- ---- - ------------------------
----- ----- - -------------- -
----------- -
------ -------
------ ---------
--
---
-------------------输出结果为：
--------- ---------------------------- --------------- ------------- ----------- ------------ ---------------------------------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/anchorme