javascript - 如何从选定范围中删除所有节点

Question

例如，我有这样的文字：

Some test <span> in span1</span> sss <span>in span2</span> end of text.

当我选择“在 spa 中的 span1 sss 中测试”时，我只想删除所选范围的父范围并创建包含我所选文本的新范围。

Some<span> test in span1 sss in spa</span>n2 end of text.

我正在使用window.getSelection()，范围，节点

请帮忙！

Answer 1

您可以使用从选择中获得的范围的deleteContents(),toString()和insertNode()方法来执行此操作。

以下内容适用于除 IE <= 8 以外的所有主要浏览器。对于这些浏览器，您需要采用不同的方法，如果您需要，我可以概述一下。

演示：http: //jsfiddle.net/HUm2K/

代码：

var sel = window.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var newSpan = document.createElement("span");
    var selectedTextNode = document.createTextNode( range.toString() );
    newSpan.appendChild(selectedTextNode);
    range.deleteContents();
    range.insertNode(newSpan);
    range.selectNode(newSpan);
    sel.removeAllRanges();
    sel.addRange(range);
}