javascript - 如何在内联粗体标记后对元素进行范围选择？

Question

我已经尝试了所有我能想到的方法，但对于我来说，我无法以编程方式选择粗体标记后的任何文本。我已经在 childNodes 数组中的所有 3 个节点上尝试了 setStart，但它仍然不起作用。

有人可以解释我需要做什么才能让它工作吗？

<div class = "tr" id = "data">
     This text is <b>bold</b> as well it should be.
</div>

<button onclick="makeSelection(1,10);">Selection before bold</button>
<button onclick="makeSelection(35,38);">Selection after bold</button>

然后是 JS:

function makeSelection(start, end) {
var parent = document.getElementById('data');

var range = document.createRange();
        range.setStart(parent.childNodes[0], start);
        range.setEnd(parent.childNodes[0], end);

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range); 
 }

JSFiddle

谢谢!

Answer 1

不完全确定这是否是您想要的，但您可以简单地将 childNode 索引作为函数调用的一部分传递？

<div class = "tr" id = "data">
 This text is <b>bold</b> as well it should be.
</div>

<button onclick="makeSelection(1,18, 0);">Selection before bold</button>
<button onclick="makeSelection(1,23, 2);">Selection after bold</button>

然后简单地更改脚本以使用此变量:

function makeSelection(start, end, child) {
var parent = document.getElementById('data');

var range = document.createRange();
    range.setStart(parent.childNodes[child], start);
    range.setEnd(parent.childNodes[child], end);

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range); 
}

按照您当前的代码，它永远无法到达第 35 - 38 位，因为您仍处于第一个子节点中。调用此函数将搜索节点并收到越界异常，因为第一个节点只有 19 个字符长。