如何在页面访问时自动为圆括号内容添加带唯一ID的span标签

嘿，我来帮你搞定这个需求！要实现页面加载时自动给所有包含内容的圆括号（不管内部格式如何）包裹上带唯一ID的<span>标签，这里有几个实用的前端方案：

原生JavaScript方案（无依赖，推荐） #

这个方案不需要任何第三方库，直接在浏览器中运行，兼容性好：

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 初始化ID计数器，从1开始递增
  let refIdCounter = 1;

  // 递归遍历所有文本节点的函数
  function processTextNodes(targetNode) {
    // 只处理文本节点
    if (targetNode.nodeType === Node.TEXT_NODE) {
      const originalText = targetNode.textContent;
      // 匹配所有非空的圆括号内容（如需处理空括号，把正则改成/\((.*?)\)/g）
      const bracketRegex = /\(([^)]+)\)/g;
      let matchResult;
      let processedHtml = '';
      let lastMatchEnd = 0;

      // 逐个匹配并替换括号内容
      while ((matchResult = bracketRegex.exec(originalText)) !== null) {
        // 添加匹配区间之前的文本
        processedHtml += originalText.substring(lastMatchEnd, matchResult.index);
        // 用带唯一ID的span包裹当前匹配到的括号内容
        processedHtml += `<span id="${refIdCounter}">(${matchResult[1]})</span>`;
        // 计数器递增，确保ID唯一
        refIdCounter++;
        // 更新最后匹配的结束位置
        lastMatchEnd = bracketRegex.lastIndex;
      }
      // 添加最后一段未匹配的文本
      processedHtml += originalText.substring(lastMatchEnd);

      // 如果文本有修改，替换原文本节点
      if (processedHtml !== originalText) {
        const wrapperSpan = document.createElement('span');
        wrapperSpan.innerHTML = processedHtml;
        targetNode.parentNode.replaceChild(wrapperSpan, targetNode);
      }
    } 
    // 处理元素节点（跳过脚本和样式标签，避免破坏功能）
    else if (targetNode.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE'].includes(targetNode.tagName)) {
      // 递归处理所有子节点
      for (let i = 0; i < targetNode.childNodes.length; i++) {
        processTextNodes(targetNode.childNodes[i]);
      }
    }
  }

  // 从body开始遍历整个文档的节点
  processTextNodes(document.body);
});

代码说明： #

• 会自动跳过<script>和<style>标签，防止破坏页面的脚本和样式逻辑
• 用递归方式遍历所有文本节点，确保不会遗漏任何括号内容
• ID从1开始递增，保证整个页面内的ID唯一；如果担心和现有ID冲突，可以把ID改成ref-${refIdCounter}这种带前缀的形式
• 正则默认匹配非空的圆括号，要是需要处理空括号（比如()），把正则表达式调整为/\((.*?)\)/g即可

jQuery简化方案（如果你的项目已经在用jQuery） #

如果页面已经引入了jQuery，可以用更简洁的代码实现：

$(document).ready(function() {
  let refIdCounter = 1;
  // 遍历所有非脚本、非样式元素下的文本节点
  $('body *:not(script, style)').contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  }).each(function() {
    const originalText = $(this).text();
    // 替换括号内容为带唯一ID的span
    const processedHtml = originalText.replace(/\(([^)]+)\)/g, function(match) {
      return `<span id="${refIdCounter++}">${match}</span>`;
    });
    // 替换原文本节点
    if (processedHtml !== originalText) {
      $(this).replaceWith($('<span>').html(processedHtml));
    }
  });
});

注意事项： #

• 如果你的内容里有嵌套圆括号（比如(abc (def) ghi)），上面的正则会只匹配到(abc (def)，因为正则默认是贪婪匹配。这种复杂场景需要额外的逻辑处理，比如用栈来跟踪括号的嵌套层级，不过如果你的需求里没有嵌套括号，上面的方案完全够用。

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