Question

此函数返回用户选择的文本并将其包装在标记中，在本例中为粗体标记。

function makeBold() {
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var newNode = document.createElement("b");
    range.surroundContents(newNode);
}

现在，在我调用该函数后，将删除选择（突出显示的文本）。如何返回该选择，或者如何在不丢失我的选择的情况下调用该函数？

Answer 1

以下内容可行：

function makeBold() {
    var selection = window.getSelection();
    if (selection.rangeCount) {
        var range = selection.getRangeAt(0).cloneRange();
        var newNode = document.createElement("b");
        range.surroundContents(newNode);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

但是，有几个问题需要注意：

范围的surroundContents()方法不适用于每个范围：它必须在DOM内有意义，以包围新节点中的范围内容。例如，在范围内使用surroundContents()跨越两个段落但未完全选择任何一个将引发错误。有关此的正式定义，请参阅DOM Level 2 Range spec。
IE版本8以及不包括版本8不支持DOM Range，并且与其他浏览器具有完全不同的Selection对象。 IE 9将具有与其他浏览器类似的范围和选择功能。
在继续操作之前，您需要检查选择的rangeCount属性，否则如果没有选择，您将获得异常。

Javascript：DOM操作后返回选择（突出显示的文本）

1 个答案: