如何使用JS高亮任意元素标签中指定部分文本内容？

现有如下HTML结构：

<p>Non-highlighted part. Only this part must be highlighted. Non-highlighted part.</p>

需要仅高亮其中的「Only this part must be highlighted.」文本片段，但使用如下代码时，会高亮整个<p>元素：

var xpath = "//*[contains(text(), 'Only this part must be highlighted.')]";
var matchingElements = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

const numberOfElements = matchingElements.snapshotLength;

for (let i = 0; i < numberOfElements; i++) {
    const element = matchingElements.snapshotItem(i);

    console.log(element.tagName, element.textContent);

    // 高亮整个元素
    element.style.backgroundColor = "yellow";
}

解决方案 #

核心思路 #

不能直接给父元素添加样式，需要将目标文本从父元素的文本节点中拆分出来，用带高亮样式的<span>标签单独包裹。

实现代码 #

const targetText = "Only this part must be highlighted.";
const xpath = `//*[contains(text(), '${targetText}')]`;
const matchingElements = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (let i = 0; i < matchingElements.snapshotLength; i++) {
    const element = matchingElements.snapshotItem(i);
    // 遍历元素的子节点，定位包含目标文本的文本节点
    const childNodes = element.childNodes;
    for (let j = 0; j < childNodes.length; j++) {
        const node = childNodes[j];
        // 仅处理文本节点
        if (node.nodeType === Node.TEXT_NODE && node.textContent.includes(targetText)) {
            const fullText = node.textContent;
            const splitPos = fullText.indexOf(targetText);
            // 拆分文本为三部分：目标文本前、目标文本、目标文本后
            const before = fullText.slice(0, splitPos);
            const after = fullText.slice(splitPos + targetText.length);

            // 创建用于高亮的span元素
            const highlightSpan = document.createElement('span');
            highlightSpan.style.backgroundColor = 'yellow';
            highlightSpan.textContent = targetText;

            // 替换原文本节点
            element.removeChild(node);
            // 插入前半段文本（如果存在）
            if (before) element.insertBefore(document.createTextNode(before), node.nextSibling);
            // 插入高亮span
            element.insertBefore(highlightSpan, node.nextSibling);
            // 插入后半段文本（如果存在）
            if (after) element.insertBefore(document.createTextNode(after), node.nextSibling);
            
            // 找到目标文本后退出当前节点循环，避免重复处理
            break;
        }
    }
}

注意事项 #

• 若同一元素内有多个文本节点包含目标文本，可移除代码中的break，但需注意避免重复匹配导致的异常。
• 该方法会保留原HTML结构的完整性，仅修改目标文本所在的文本节点。

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