如何通过编程获取并标记跨多元素的指定文本Range？

问题场景 #

现有如下HTML结构：

<p>
  Lorem ipsum <span class="bold">dolor</span> sit amet
</p>

已经拿到了这个p元素的DOM引用，需要通过代码把其中的ipsum dolor sit这部分内容统一标记（比如包裹成一个带样式的容器）。

实现思路 #

目标文本ipsum dolor sit不是一个完整的连续文本节点——它由三个部分组成：ipsum文本节点、<span class="bold">dolor</span>元素节点、sit文本节点。核心是把这三个节点打包到同一个容器里，同时保留原有的DOM结构。

具体代码实现（JavaScript） #

// 假设已经获取了p元素，比如const p = document.querySelector('p');
function markTargetText(pElement) {
  // 把p的子节点转成数组，方便遍历
  const childNodes = Array.from(pElement.childNodes);
  
  let startNode = null; // 目标片段的起始节点（ipsum所在的文本节点）
  let endNode = null; // 目标片段的结束节点（sit所在的文本节点）
  let accumulatedText = '';

  // 遍历节点，拼接文本找目标范围
  for (const node of childNodes) {
    const nodeContent = node.textContent.trim();
    accumulatedText = (accumulatedText + ' ' + nodeContent).trim();

    // 找到ipsum所在节点，记录起始点
    if (accumulatedText.includes('ipsum') && !startNode) {
      startNode = node;
    }
    // 匹配到完整目标文本，记录结束点并停止遍历
    if (accumulatedText === 'ipsum dolor sit') {
      endNode = node;
      break;
    }
  }

  // 没找到目标节点直接返回
  if (!startNode || !endNode) return;

  // 创建用来包裹目标片段的容器
  const wrapper = document.createElement('span');
  wrapper.className = 'highlighted'; // 自定义样式类，可自行添加CSS样式

  // 把起始到结束的所有节点移到容器里
  let currentNode = startNode;
  while (currentNode) {
    const nextNode = currentNode.nextSibling;
    wrapper.appendChild(currentNode);
    if (currentNode === endNode) break;
    currentNode = nextNode;
  }

  // 把容器插回原来起始节点的位置
  pElement.insertBefore(wrapper, startNode.previousSibling?.nextSibling || pElement.firstChild);
}

// 调用示例
const targetP = document.querySelector('p');
markTargetText(targetP);

关键说明 #

• 遍历子节点时通过拼接文本内容，准确定位目标片段的首尾节点，避免遗漏原有的嵌套元素
• 保留原有的<span class="bold">dolor</span>结构，只是将其与前后文本节点统一包裹
• 可根据需求修改wrapper的标签（比如用原生<mark>标签）或样式类，实现不同的视觉标记效果

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