您可以在JavaScript中设置和/或更改用户的文本选择吗？

Question

在JavaScript中,有多种方法可以访问用户的文本选择,以及创建文本选择(或范围) - 请参阅http://www.quirksmode.org/dom/range_intro.html.

根据该页面,您可以以编程方式创建范围,并访问其中的文本.但这样做并不会改变用户的文本选择,或者如果用户没有选择文本,则会使用户选择一些文本.

您可以在JavaScript中设置和/或更改用户的文本选择吗？

Answer 1

是.在所有的浏览器,你可以得到一个或多个RangeS或A TextRange从用户的选择,都Range和TextRange对改变区域的内容的方法.

UPDATE

您可以通过在大多数浏览器中创建并将其Range添加到Selection对象中,TextRange并select()在IE <= 8中创建并调用其方法来设置用户的选择.

例如,要将选择设置为包含元素的内容:

function selectElementContents(el) {
    if (window.getSelection && document.createRange) {
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
    }
}

该Selection对象还有几种方法可用于在非IE浏览器中更改用户的选择.如果您可以更具体地了解如何更改选择,那么将更容易提供帮助.

Answer 2

2021 年更新

在选择API做到这一点。而不是创建一个new Selection()（看起来很直观，但不起作用），window.getSelection()总是返回一个Selection对象 - 即使用户没有突出显示任何东西！然后，您可以使用setBaseAndExtent()突出显示特定节点 - 这将更改用户选择的任何内容（即使未选择任何内容）以匹配您指定的内容。

下面的示例突出显示了此 StackOverflow 页面中的问题

const selection = window.getSelection()
const headerElement = document.querySelector('#question-header a')
selection.setBaseAndExtent(headerElement,0,headerElement,1)