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

Question

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

根据该页面，您可以以编程方式创建一个范围，并访问该范围内的文本。但这样做不会改变用户的文本选择，或者使用户拥有一些选定的文本（如果他们还没有）。

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

Answer 1

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

更新

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

例如，设置选择以包含元素的内容：

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 执行此操作。 window.getSelection() 始终返回一个 Selection，而不是创建一个 new Selection()（这看起来很直观，但不起作用）对象 - 即使用户没有突出显示任何内容！然后，您可以使用 setBaseAndExtent() 来制作特定的节点被突出显示 - 这将更改用户选择的任何内容（即使没有选择任何内容）以匹配您指定的内容。

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

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