Question

如何在开头创建带插入符号的选择，在结尾创建锚点？

例如：

var sel = window.getSelection();
var el = document.getElementById("example");
var range = document.createRange();
range.setStart(el, 5);
range.setEnd(el, 8);
sel.removeAllRanges();
sel.addRange(range);

将锚点设置为offset = 5，插入符号设置为offset = 8.

将range.setEnd()设置为开始前的某个点不起作用（至少在Chrome中）。

那我该怎么做呢？

[我正在替换包含选择的元素的outerHTML，我想完全保留选择]

Answer 1

好问题。 Selection.modify()是迄今为止我唯一能找到的东西：

var range = document.createRange();
range.setStart(el, 8);
range.setEnd(el, 8);

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

for (var i = 0; i < 3; i++) {
    sel.modify("extend", "left", "character");
}

丑陋，但它确实有效。 Here’s a demo!

Answer 2

我发现 selection.setBaseAndExtent() 有效（至少在 Chrome 中）。

//removeAllRanges(); is unnecessary.
sel.setBaseAndExtent(el, 5, el, 0);

如何在开始时使用插入符创建选择，在结尾处创建锚点？

2 个答案: