如何跨多DOM文本节点实现指定文本高亮？技术方案咨询

问题背景 #

给定基础HTML结构：

<!DOCTYPE html>
<html>
    <body>
        <p> This is the content of paragraph 1. </p>
        <p> This is the content of paragraph 2. </p>
        <p> This is the content of paragraph 3. </p>
        <p> This is the content of paragraph 4. </p>
    </body>
</html>

已获取所有文本节点的列表nodes（nodes[0]对应第一个段落的文本节点，nodes[0].parentNode为对应<p>元素），需要高亮跨节点的子字符串：content of paragraph 1. This is the content of paragraph 2.，已知定位参数：

• start_node_index = 0
• start_node_offset = 14（从文本节点左侧计数）
• end_node_index = 1
• end_node_offset = 0（从文本节点右侧计数）

核心疑问：能否直接插入<mark>标签让DOM自动处理？是否需要手动编写复杂算法？能否自动化实现跨节点的文本包裹？

实现方案 #

关键结论 #

不能直接在起始/结束位置手动插入<mark>标签让DOM自动处理，DOM不会自动合并跨节点的标签结构。但无需手动编写复杂的节点拆分算法，可以利用浏览器原生的Range和SelectionAPI完成自动化处理。

具体实现代码 #

// 基于已知参数获取对应的文本节点和偏移量
const startNode = nodes[0];
const startOffset = 14;
const endNode = nodes[1];
// 注意：end_node_offset从右侧计数为0，对应文本节点的全长
const endOffset = endNode.textContent.length;

// 创建Range对象并定位高亮区间
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

// 创建高亮元素（可替换为带自定义样式的span）
const highlightEl = document.createElement('mark');

// 用高亮元素包裹范围内的所有内容
range.surroundContents(highlightEl);

原理解释 #

Range.surroundContents()方法会自动处理所有DOM操作细节：

• 自动拆分起始文本节点，将startOffset到节点末尾的文本用高亮元素包裹
• 完全包裹起始与结束节点之间的所有文本节点（若存在多个中间节点）
• 若结束偏移量不是节点全长，自动拆分结束文本节点，将开头到endOffset的文本用高亮元素包裹
• 全程维护DOM结构的完整性，无需手动处理节点拆分、合并等边缘情况

自定义样式扩展 #

若需要自定义高亮样式，可替换<mark>为带类名的<span>：

const highlightEl = document.createElement('span');
highlightEl.classList.add('custom-highlight');

配合CSS样式：

.custom-highlight {
    background-color: #ffeb3b;
    padding: 2px 4px;
    border-radius: 3px;
}

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