如何为文本中未被<span>包裹的指定术语添加tooltip标签

你遇到的问题核心是要规避已存在的span标签内部内容的匹配，用复杂的负向预查正则很容易出现边界匹配错误，更稳定的方案是拆分文本后仅处理普通文本片段，具体实现如下：

实现思路 #

• 先将所有术语按长度从长到短排序，避免短术语先匹配导致长术语被拆分无法识别
• 每次处理单个术语时，用正则将字符串切割为「已有的span标签块」和「普通文本块」交替的数组
• 仅对普通文本块做术语匹配替换，span标签块直接跳过
• 所有术语处理完成后拼接得到最终字符串

完整代码实现 #

// 正则特殊字符转义函数，避免术语含正则特殊字符时报错
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
/**
 * 给未被span包裹的术语添加tooltip标签
 * @param {string} str 原始文本字符串
 * @param {Object} tooltips 术语与对应tooltip文本的键值对
 * @returns {string} 处理后的字符串
 */
function wrapTermsWithTooltip(str, tooltips) {
  // 术语按长度降序排序
  const terms = Object.keys(tooltips).sort((a, b) => b.length - a.length);
  let result = str;
  terms.forEach(term => {
    const escapedTerm = escapeRegExp(term);
    // 切割字符串，分离span块和普通文本
    const parts = result.split(/(<span class="tooltip">[\s\S]*?<\/span>)/g);
    result = parts.map(part => {
      // 跳过已有的span块
      if (part.startsWith('<span class="tooltip"')) return part;
      // 全词匹配替换普通文本中的术语
      const termReg = new RegExp(`\\b${escapedTerm}\\b`, 'g');
      return part.replace(termReg, match => {
        return `<span class="tooltip">${match}<span class="tooltip-text">${tooltips[term]}</span></span>`;
      });
    }).join('');
  });
  return result;
}

测试示例 #

const originalStr = 'Test string of text containing foo bar and baz.';
const toolTips = {
  foo: 'tooltip for foo',
  bar: 'problematic tooltip that also contains baz',
  baz: 'tooltip for baz'
};
const processedStr = wrapTermsWithTooltip(originalStr, toolTips);
console.log(processedStr);

运行后输出结果完全符合预期，不会替换span内部的任何内容，也不会出现首段文本无法匹配的问题。

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