如何用cheerio将纯HTML中的特定文本替换为<A>链接？

问题背景 #

需将HTML文本中的特定词组替换为带指定路径的<a>标签，示例原始HTML：

<blockquote>
<p>The decentralized exchange Balancer is currently experiencing a compromise of its interface, believed to be a DNS attack. Users should check their wallet balance.</p>
</blockquote>

替换规则：

• 将「decentralized exchange」替换为 <a href="/tags/decentralized-exchange">decentralized exchange</a>
• 将「Balancer」替换为 <a href="/tags/balancer">Balancer</a>
• 将「balance」替换为 <a href="/tags/balance">balance</a>

核心限制：不能用正则全局替换，否则会破坏已生成的链接（例如误替换「Balancer」中的「balance」片段），需通过Cheerio操作DOM节点实现精准替换。

解决方案 #

核心思路 #

1. 规则优先级排序：按词组长度从长到短排序规则，优先处理长词组，避免短规则拆分长匹配项。
2. 精准遍历文本节点：仅处理非<a>标签下的文本节点，避免重复修改已生成的链接文本。
3. 拆分重构节点：将原始文本节点拆分为普通文本和<a>节点，逐个插入父元素后删除原节点，保证DOM结构正确。

代码实现 #

首先安装Cheerio：

npm install cheerio

处理代码：

const cheerio = require('cheerio');

// 替换规则：按词组长度从长到短排序
const replaceRules = [
  { text: 'decentralized exchange', href: '/tags/decentralized-exchange' },
  { text: 'Balancer', href: '/tags/balancer' },
  { text: 'balance', href: '/tags/balance' }
];

// 待处理的原始HTML
const rawHtml = `
<blockquote>
<p>The decentralized exchange Balancer is currently experiencing a compromise of its interface, believed to be a DNS attack. Users should check their wallet balance.</p>
</blockquote>
`;

// 加载HTML到Cheerio
const $ = cheerio.load(rawHtml);

// 遍历所有非a标签下的非空文本节点
$('*:not(a)').contents().filter(function() {
  return this.type === 'text' && this.nodeValue.trim() !== '';
}).each(function() {
  const originalText = this.nodeValue;
  const parentElement = $(this).parent();
  let currentCursor = 0;

  // 按规则依次处理当前文本
  replaceRules.forEach(rule => {
    let matchIndex;
    // 循环查找当前规则的匹配位置
    while ((matchIndex = originalText.indexOf(rule.text, currentCursor)) !== -1) {
      // 插入匹配前的普通文本
      if (matchIndex > currentCursor) {
        parentElement.append(document.createTextNode(originalText.slice(currentCursor, matchIndex)));
      }
      // 创建并插入a标签
      const linkNode = $(`<a href="${rule.href}">${rule.text}</a>`);
      parentElement.append(linkNode);
      // 更新游标，跳过已处理的文本段
      currentCursor = matchIndex + rule.text.length;
    }
  });

  // 插入剩余未匹配的文本
  if (currentCursor < originalText.length) {
    parentElement.append(document.createTextNode(originalText.slice(currentCursor)));
  }

  // 删除原始文本节点
  $(this).remove();
});

// 输出处理后的HTML
console.log($.html());

关键细节说明 #

• 规则排序：长词组优先处理，确保「decentralized exchange」这类组合不会被拆分成单个单词处理，同时避免短规则提前匹配长词组中的子串。
• 游标跟踪：通过currentCursor记录已处理的文本位置，确保每个文本片段只被处理一次，彻底避免重复替换。
• DOM节点操作：通过拆分重构节点的方式，直接操作DOM结构，不会破坏已生成的<a>标签内容。

内容的提问来源于stack exchange，提问作者delete