Javascript:如何根据 html 标签扩展用户选择？

Question

代码: http://jsfiddle.net/frf7w/12/

所以现在，当前方法将完全按照...选择选定的文本，并添加标签，以便在显示时页面不会爆炸。

但是我想做的是: 是，当用户选择页面的一部分时，如果选择中有不匹配的标签，选择将向前或向后跳转(取决于选择中不匹配的标签)到标签使选择有效的 html。

我之所以要这样做，是因为我希望用户能够在页面上选择文本，并能够在所见即所得编辑器中编辑该文本(我目前可以使用链接代码执行此操作) ，然后将他们编辑好的内容放回页面(目前不能这样做，因为我使用的方法添加了标签)。

Answer 1

这个 SO 答案中的 coverAll 方法正是您想要的 Use javascript to extend a DOM Range to cover partially selected nodes .由于某些原因，扩展 Selection 原型(prototype)在我的 chrome 上对我不起作用，所以我提取了代码并将 this 替换为 window.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;
}