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

Question

Le Code:http: //jsfiddle.net/frf7w/12/

所以现在,当前方法将所选文本完全视为...选中,并添加标签,以便在显示时,页面不会爆炸.

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

我想要这样做的原因是因为我希望用户能够在页面上选择文本,并且能够在WYSIWYG编辑器中编辑该文本(我现在可以使用链接代码执行此操作),然后将他们编辑过的内容放回到页面中(目前无法执行此操作,因为我使用的方法添加了标签).

Answer 1

您可以通过添加范围来更改选择的边界：

var sel = window.getSelection(),
    range = sel.getRangeAt(0);

var startEl = sel.anchorNode;
if (startEl != range.commonAncestorContainer) {
    while (startEl.parentNode != range.commonAncestorContainer) {
        startEl = startEl.parentNode;
    }
}
var endEl = sel.focusNode;
if (endEl != range.commonAncestorContainer) {
    while (endEl.parentNode != range.commonAncestorContainer) {
        endEl = endEl.parentNode;
    }
}

range.setStartBefore(startEl);
range.setEndAfter(endEl);

sel.addRange(range);

上面的示例将为您提供一个扩展的选择，以覆盖起始节点和结束节点之间的整个树，包括起始节点和结束节点（感谢commonAncestorContainer()）。

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

演示： http: //jsfiddle.net/Nq6hr/2/