Javascript：如何根据html标记扩展用户选择？

Le代码：

所以现在，当前的方法将把选定的文本完全作为。。。选中，并添加标记，以便在显示时页面不会爆炸

但我想做的是： 也就是说，当用户选择页面的一部分时，如果选择中存在不匹配的标记，则选择将向前或向后跳转（取决于选择中的不匹配标记）到使选择有效的标记

---

我之所以想这样做，是因为我希望用户能够选择页面上的文本，并能够在WYSIWYG编辑器中编辑该文本（我目前可以使用链接的代码进行编辑），然后将他们编辑的内容放回页面（目前无法这样做，因为我使用的方法添加了标记）.

您应该使用所选内容提供的节点。似乎extentNode和anchorNode代表了选择节点的结束和开始，两者都可以帮助您进行“完整”选择

---

对于内联编辑，您应该提供一个try-to-contentEditable属性。您可以使用包含此属性的范围围绕选择的元素

您可以通过以下方式更改选择的边界：

上面的示例将为您提供一个选择，该选择将展开以覆盖开始节点和结束节点之间的整个树，包括（由于）

这将文本节点视为等于dom元素，但这对您来说不应该是一个问题

---

演示：

本文中的

coverAll

方法，因此答案完全符合您的要求。由于某种原因，在我的chrome上扩展

选择

原型对我不起作用，所以我提取了代码，并用

窗口.getSelection（）替换了
这个
。最终代码如下所示：

function coverAll() {
    var ranges = [];
    for(var i=0; i<window.getSelection().rangeCount; i++) {
        var range = window.getSelection().getRangeAt(i);
        while(range.startContainer.nodeType == 3
              || range.startContainer.childNodes.length == 1)
            range.setStartBefore(range.startContainer);
        while(range.endContainer.nodeType == 3
              || range.endContainer.childNodes.length == 1)
            range.setEndAfter(range.endContainer);
        ranges.push(range);
    }
    window.getSelection().removeAllRanges();
    for(var i=0; i<ranges.length; i++) {
        window.getSelection().addRange(ranges[i]);
    }
    return;
}
功能套装（）{
var范围=[]；
对于（var i=0；我看到您正在围绕所选内容添加一个div，一旦添加，您是否认为可以获取该div的父项，然后选择它？但是，您可能会出现一种奇怪的行为。该div仅用于显示所选文本。所选文本本身没有添加div。=\n因此，选择该div的父项，可能会选择整个页面。所以你基本上想要选择文本，将其附加到编辑器div中，然后当用户完成编辑后，将其直接粘贴到页面中？这种跨浏览器，就像IE7+和真实浏览器一样吗？我已经在Chrome 14、FF7、IE9中进行了测试。我认为IE只从版本9引入了对
范围
对象的支持，这已经足够好了。会给me给我的老板另一个理由来建议我们的客户升级=d更正，IE9是IE的第一个版本，具有
范围
和
选择
。所有其他浏览器都已经使用它们很久了。
function coverAll() {
    var ranges = [];
    for(var i=0; i<window.getSelection().rangeCount; i++) {
        var range = window.getSelection().getRangeAt(i);
        while(range.startContainer.nodeType == 3
              || range.startContainer.childNodes.length == 1)
            range.setStartBefore(range.startContainer);
        while(range.endContainer.nodeType == 3
              || range.endContainer.childNodes.length == 1)
            range.setEndAfter(range.endContainer);
        ranges.push(range);
    }
    window.getSelection().removeAllRanges();
    for(var i=0; i<ranges.length; i++) {
        window.getSelection().addRange(ranges[i]);
    }
    return;
}