如何用span标签包裹元素内的单词、嵌套HTML等内容？

正则确实不适合处理嵌套HTML结构——HTML是层级化的树状结构，正则的线性匹配逻辑无法准确识别嵌套标签的边界，很容易出现匹配错位或漏处理的情况。用DOM API直接操作节点才是更可靠的方案，以下是具体实现：

实现思路 #

1. 定位所有目标容器：选中所有类名为has-transition_text-reveal的元素
2. 递归遍历节点：处理容器内的每一个子节点，包括文本节点和嵌套的元素节点
3. 针对性包裹：对文本节点直接创建包裹结构；对元素节点递归处理其内部内容，保留原有标签结构

代码实现 #

// 获取所有需要处理的容器
const targetContainers = document.querySelectorAll('.has-transition_text-reveal');

function processNodes(parentNode) {
    // 跳过已处理的包裹元素，避免重复操作
    if (parentNode.classList?.contains('text-reveal_wrapper') || parentNode.classList?.contains('text-reveal')) {
        return;
    }

    // 倒序遍历子节点，防止节点替换后索引混乱
    for (let i = parentNode.childNodes.length - 1; i >= 0; i--) {
        const currentNode = parentNode.childNodes[i];

        if (currentNode.nodeType === Node.TEXT_NODE) {
            // 过滤纯空白文本，按需调整
            const trimmedText = currentNode.textContent.trim();
            if (trimmedText) {
                // 创建包裹结构
                const wrapper = document.createElement('span');
                wrapper.className = 'text-reveal_wrapper';
                
                const textReveal = document.createElement('span');
                textReveal.className = 'text-reveal';
                textReveal.textContent = currentNode.textContent;
                
                wrapper.appendChild(textReveal);
                // 替换原文本节点
                parentNode.replaceChild(wrapper, currentNode);
            }
        } else if (currentNode.nodeType === Node.ELEMENT_NODE) {
            // 递归处理嵌套元素的内部节点
            processNodes(currentNode);
        }
    }
}

// 批量处理每个目标容器
targetContainers.forEach(container => {
    processNodes(container);
});

效果示例 #

原HTML结构：

<div class="has-transition_text-reveal">
  欢迎访问 <a href="/">我的网站</a>，这里有<span>嵌套的文本</span>内容。
</div>

处理后结构：

<div class="has-transition_text-reveal">
  <span class="text-reveal_wrapper"><span class="text-reveal">欢迎访问 </span></span>
  <a href="/">
    <span class="text-reveal_wrapper"><span class="text-reveal">我的网站</span></span>
  </a>
  <span class="text-reveal_wrapper"><span class="text-reveal">，这里有</span></span>
  <span>
    <span class="text-reveal_wrapper"><span class="text-reveal">嵌套的文本</span></span>
  </span>
  <span class="text-reveal_wrapper"><span class="text-reveal">内容。</span></span>
</div>

关键细节说明 #

• 倒序遍历子节点：正序遍历会因为节点替换导致后续节点索引偏移，倒序可以避免这个问题
• 递归处理元素节点：确保嵌套在<a>、<span>等标签内的文本也能被正确包裹
• 过滤纯空白文本：避免对无意义的空白字符创建包裹结构，可根据业务需求调整过滤规则

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