Question

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

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

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

Answer 1

是。在所有浏览器中，您可以从用户的选择中获得一个或多个Range或TextRange，Range和TextRange都有更改范围内容的方法。

<强>更新

您可以通过创建Range并在大多数浏览器中将其添加到Selection对象并创建TextRange并在其中调用其select()方法来设置用户的选择IE＆lt; = 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 年更新

Selection 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)

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

2 个答案:

2021 年更新