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