如何通过代码高亮contenteditable div中的指定文本

contenteditable元素不支持setSelectionRange方法，得用浏览器的Range和Selection API来实现按索引选中文本。下面是具体实现步骤：

核心工具函数 #

先实现一个递归遍历节点的工具函数，用来根据全局文本索引定位到对应的文本节点和偏移量：

function getTextNodeAndOffset(el, index) {
  let currentIndex = 0;
  const traverse = node => {
    if (node.nodeType === Node.TEXT_NODE) {
      if (currentIndex + node.length >= index) {
        return { node, offset: index - currentIndex };
      }
      currentIndex += node.length;
    } else {
      for (let child of node.childNodes) {
        const result = traverse(child);
        if (result) return result;
      }
    }
    return null;
  };
  return traverse(el);
}

再封装选中指定范围的函数：

function setContenteditableSelection(el, startIndex, endIndex) {
  const selection = window.getSelection();
  const range = document.createRange();
  
  const start = getTextNodeAndOffset(el, startIndex);
  const end = getTextNodeAndOffset(el, endIndex);
  
  if (!start || !end) return;
  
  range.setStart(start.node, start.offset);
  range.setEnd(end.node, end.offset);
  
  selection.removeAllRanges();
  selection.addRange(range);
  el.focus();
}

适配你的原有代码 #

把原来setSelectionRange的调用替换成上面的函数即可，同时修正空数组判断的错误：

const el = document.getElementById("some_contenteditable_div");
const words = "Find me";
const searchText = el.textContent;  // 基于纯文本内容计算索引
if (searchText !== "") {
  const foundPosition = findText(searchText, words); // 返回[起始索引, 结束索引]
  // 不要用 != [] 判断空数组，应检查数组是否有效
  if (foundPosition && foundPosition.length === 2) {
    setContenteditableSelection(el, foundPosition[0], foundPosition[1]);
  } else {
    console.log("Word(s) not found in text");
  }
} else {
  console.log("No text to search");
}

关键说明 #

• 工具函数会递归遍历contenteditable的所有子节点，确保索引和textContent的纯文本索引完全对应。
• 若contenteditable内包含复杂嵌套节点（比如span、p），该方法依然能准确定位文本位置。

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