兼容IE6+的跨HTML元素节点纯JavaScript文本高亮实现需求

我刚好处理过类似的需求，要实现跨元素的完整文本匹配高亮，还要兼容老旧浏览器，纯JS就能搞定。核心思路是先把HTML转换成DOM结构，精准定位匹配文本在各个节点中的位置，再拆分文本节点插入高亮标签。

下面是完整的实现代码，附带详细注释，完全兼容IE6及以上：

function highlightCrossElement(htmlStr, searchText) {
    // 创建临时容器，用于解析HTML（兼容IE6）
    var tempContainer = document.createElement('div');
    tempContainer.innerHTML = htmlStr;

    // 第一步：收集所有文本节点及其全局文本偏移量
    var textNodes = [];
    var totalOffset = 0;

    // 递归遍历DOM树，收集文本节点
    function traverse(node) {
        if (node.nodeType === 3) { // 文本节点
            var text = node.nodeValue;
            textNodes.push({
                node: node,
                start: totalOffset,
                end: totalOffset + text.length
            });
            totalOffset += text.length;
        } else if (node.nodeType === 1 && node.nodeName !== 'MARK') { // 元素节点，跳过已有的mark标签
            var childNodes = node.childNodes;
            for (var i = 0; i < childNodes.length; i++) {
                traverse(childNodes[i]);
            }
        }
    }

    traverse(tempContainer);

    // 第二步：获取全局文本，查找匹配的起始和结束位置
    var fullText = tempContainer.innerText || tempContainer.textContent; // 兼容IE6用innerText
    var matchStart = fullText.indexOf(searchText);
    if (matchStart === -1) {
        // 没有匹配，直接返回原HTML
        return htmlStr;
    }
    var matchEnd = matchStart + searchText.length;

    // 第三步：遍历文本节点，拆分并插入高亮标签
    var currentPos = matchStart;
    var remainingLength = searchText.length;

    for (var i = 0; i < textNodes.length; i++) {
        var nodeInfo = textNodes[i];
        var node = nodeInfo.node;
        var nodeText = node.nodeValue;
        var nodeStart = nodeInfo.start;
        var nodeEnd = nodeInfo.end;

        // 如果当前节点和匹配区域没有交集，跳过
        if (nodeEnd <= currentPos || nodeStart >= matchEnd) {
            continue;
        }

        // 计算当前节点内需要高亮的起始和结束索引
        var highlightStartInNode = Math.max(0, currentPos - nodeStart);
        var highlightEndInNode = Math.min(nodeText.length, matchEnd - nodeStart);

        // 拆分文本节点：前半部分（非高亮）、高亮部分、后半部分（非高亮）
        var parent = node.parentNode;

        // 1. 处理前半部分（如果有的话）
        if (highlightStartInNode > 0) {
            var beforeText = nodeText.substring(0, highlightStartInNode);
            var beforeNode = document.createTextNode(beforeText);
            parent.insertBefore(beforeNode, node);
        }

        // 2. 创建高亮部分的mark标签
        var highlightText = nodeText.substring(highlightStartInNode, highlightEndInNode);
        var markNode = document.createElement('mark');
        markNode.appendChild(document.createTextNode(highlightText));
        parent.insertBefore(markNode, node);

        // 3. 处理后半部分（如果有的话）
        if (highlightEndInNode < nodeText.length) {
            var afterText = nodeText.substring(highlightEndInNode);
            var afterNode = document.createTextNode(afterText);
            parent.insertBefore(afterNode, node);
        }

        // 删除原文本节点
        parent.removeChild(node);

        // 更新当前位置和剩余长度
        currentPos = nodeStart + highlightEndInNode;
        remainingLength -= (highlightEndInNode - highlightStartInNode);
        if (remainingLength <= 0) {
            break;
        }
    }

    // 第四步：将处理后的DOM转回HTML字符串
    return tempContainer.innerHTML;
}

// 测试示例
var input = "the next text: <span>i want </span>to <br>highlight, thank you";
var search = "i want to highlight";
var output = highlightCrossElement(input, search);
console.log(output);
// 输出结果：the next text: <span><mark>i want </mark></span><mark>to </mark><br><mark>highlight</mark>, thank you

关键兼容点说明： #

• DOM解析与序列化：用临时div的innerHTML解析HTML，innerHTML序列化，IE6完全支持
• 文本获取：优先用innerText（IE6原生支持），回退到textContent适配现代浏览器
• 节点遍历：用childNodes递归遍历DOM，避免children属性在旧IE中的兼容性问题
• 节点操作：全部使用createTextNode、insertBefore、removeChild等基础DOM API，都是IE6支持的标准方法

扩展说明： #

1. 当前代码只处理第一个匹配结果，如果需要高亮所有匹配项，可以循环调用indexOf并传入起始位置，批量处理
2. 代码会自动跳过已存在的<mark>标签，避免重复高亮
3. 若需要自定义高亮标签（比如不用<mark>改用<span class="highlight">），只需修改创建高亮节点的代码即可

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