如何在文本指定位置创建Range，无需依赖ChildNodes实现精准定位

核心原理 #

你对Range API的能力存在误解：Range.setStart()、Range.setEnd()传入文本节点作为第一个参数时，第二个参数支持传入任意合法的字符偏移量（不局限于0或文本节点总长度），刚好支持定位到文本内部任意位置，无需绕开ChildNodes实现需求。

你要定位到test中te和st的中间位置，只需要把偏移量设置为2即可。

注意：你原代码中取el.childNodes[1]获取到的是<br>元素而非文本节点，这也是之前无法定位到文本内部的原因之一。div#myText的子节点顺序为：第一个test文本节点 →
元素 → 第二个test文本节点。

修正后的代码 #

JavaScript 部分 #

function myFunction(el) {
    // el.childNodes[0]对应第一个test文本节点，el.childNodes[2]对应第二个test文本节点
    var textNode = el.childNodes[2];
    var range = document.createRange();
    // 偏移量设为2即可定位到te|st的位置
    range.setStart(textNode, 2);
    range.setEnd(textNode, 2);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

HTML 部分 #

<!DOCTYPE html>
<html>
<body>

<div id="myText" contenteditable>test<br>test</div>

<button type="button" onclick='myFunction(document.getElementById("myText"))'>Go into Text</button>

</body>
</html>

进阶通用方案（自动匹配文本位置） #

如果需要动态匹配任意文本的位置，可以通过遍历元素内所有文本节点，匹配到目标字符串后计算偏移量：

function setCaretToTextPosition(el, targetText, offsetInTarget) {
    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
    let node;
    while(node = walker.nextNode()) {
        const text = node.textContent;
        const index = text.indexOf(targetText);
        if(index !== -1) {
            const range = document.createRange();
            const finalOffset = index + offsetInTarget;
            range.setStart(node, finalOffset);
            range.collapse(true);
            const sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            return;
        }
    }
}
// 调用示例：定位到第一个test的te和st中间
// setCaretToTextPosition(document.getElementById("myText"), "test", 2)

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