JS/正则实现innerHTML文本与嵌套HTML元素的span包裹问题求解

不要用正则直接匹配HTML字符串完成这个需求，正则无法可靠处理标签嵌套、属性内特殊字符等边界场景，很容易出现你遇到的标签拆分错误。直接利用浏览器原生DOM解析能力处理节点，逻辑简单且准确率100%。

核心处理逻辑：

• 将原始HTML放入临时容器解析为原生DOM节点，从根源避免标签匹配错误
• 遍历容器下的一级子节点，按节点类型分别处理
  • 元素节点：如果本身就是span标签则直接保留；其余标签（无论内部嵌套多少层结构）整体作为独立单元，外层包裹span
  • 文本节点：按空白字符分割为独立单词，每个单词单独用指定class的span包裹，单词间的空格正常保留
• 将处理完成的节点重新挂载回目标元素

完整可运行代码：

function wrapElementText(elementSelector) {
  const targetEl = document.querySelector(elementSelector);
  if (!targetEl) return;

  // 临时容器解析原始HTML
  const tempBox = document.createElement('div');
  tempBox.innerHTML = targetEl.innerHTML;
  targetEl.innerHTML = '';

  tempBox.childNodes.forEach(node => {
    // 处理已存在的HTML元素节点
    if (node.nodeType === Node.ELEMENT_NODE) {
      const clonedNode = node.cloneNode(true);
      if (clonedNode.tagName.toLowerCase() !== 'span') {
        // 非span标签整体包裹span
        const wrapSpan = document.createElement('span');
        wrapSpan.appendChild(clonedNode);
        targetEl.appendChild(wrapSpan);
      } else {
        // 原有span标签直接保留
        targetEl.appendChild(clonedNode);
      }
      return;
    }

    // 处理文本节点，拆分独立单词
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent;
      // 分割时保留空白字符
      const segments = text.split(/(\s+)/);
      segments.forEach(seg => {
        if (!seg) return;
        if (/^\s+$/.test(seg)) {
          // 纯空白内容直接插入文本节点
          targetEl.appendChild(document.createTextNode(seg));
        } else {
          // 单词包裹带指定class的span
          const wordSpan = document.createElement('span');
          wordSpan.className = 'wrapped-text';
          wordSpan.textContent = seg;
          targetEl.appendChild(wordSpan);
        }
      });
    }
  });
}

之前的正则方案问题本质是正则没有上下文匹配能力，无法识别HTML标签的开闭配对关系，只要存在嵌套标签、属性值包含尖括号等场景就会匹配失效，所有处理HTML字符串的场景都优先推荐用原生DOM解析能力实现，不需要堆砌复杂的正则规则覆盖边界case。

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