27

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

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

你能在 JavaScript 中设置和/或更改用户的文本选择吗？

4

2 回答 2

40

是的。在所有浏览器中，您都可以从用户的选择中获得一个或多个Ranges 或 a ，并且两者都具有更改范围内容的方法。TextRangeRangeTextRange

更新

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

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

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 浏览器中的选择。如果您可以更具体地说明您希望如何更改选择，那么提供帮助会更容易。

于 2010-11-15T10:28:40.977 回答
6

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)
于 2021-01-26T10:13:57.683 回答