如何进行跨越多个元素的范围选择？答案

【问题标题】：How do I make a Range selection spanning multiple elements?如何进行跨越多个元素的范围选择？
【发布时间】：2011-12-21 12:20:08
【问题描述】：

代码：http://jsfiddle.net/byHMP/2/

（注意：正确选择后，代码会在所选内容周围插入一个跨度并更改背景颜色）

选择代码：

var html = "";

sel = window.getSelection(); // not sure how many browsers this works on.
var temp = document.createElement("div");

for (var i = 0, len = sel.rangeCount; i < len; ++i) {
    curr_range = sel.getRangeAt(i);

    temp.appendChild(curr_range.cloneContents());

    if (temp.innerHTML.length < MINIMUM_SELECTION_LENGTH) {
        return false;
    }

    var selection = document.createElement("span")
    //selection.id = content_hash;
    curr_range.surroundContents(selection);

    selection = $j(selection).addClass("highlighted");

}
html = temp.innerHTML;

所以，现在，它只会在元素内进行选择，如果你覆盖了整个元素以及该元素左右两侧的文本，则可能...

如果标签不匹配，也许我需要找到一种方法将选择扩展到某个方向？我只是不知道。（另外，我不知道该怎么做。我的意思是，我可以将选择扩展到整个父元素（例如 UL，当您只想选择多个 LI 时，但我觉得这有点矫枉过正大多数情况下）

【问题讨论】：

您能否更具体地说明您想要达到的确切效果？这些问题是否涵盖了它？ stackoverflow.com/questions/3223682/…, stackoverflow.com/questions/6285154/…
第一个没那么多。第二个解释了我的问题。如果我有一个包含不匹配标签的选择，我不能在选择具有有效的 HTML（所有标签都匹配）之前扩展选择吗？
我不太清楚。如果您只是想更改整个选择的背景颜色，那么第一个答案适用。如果您想应用任意样式，我对第二个问题的回答也会有所帮助。认为选择是否包含有效的 HTML 可能没有帮助；相反，将其视为文档中从一个点到另一个点的范围会更有帮助，途中会包含几个节点（可能在每一端都有部分选定的节点）。然后，您可以依次对每个选定的节点进行操作（例如，将其包围在一个跨度中）。

标签： javascript jquery range

【解决方案1】：

Range#surroundContents 要求所有选定元素的范围内都包含其最近的共同祖先元素。否则，它会抛出 BAD_BOUNDARY_ERR。

要解决此问题，您需要以下内容。

var node = document.createElement(tagName);
var frag = range.extractContents();
node.appendChild(frag);
range.insertNode(node);
if (!range.collapsed) {
  range.removeContents()
}

【讨论】：

我知道这个错误。您的代码会产生一些奇怪的行为。如果你跨 div，它会拆分 div，并创建一个

对……没关系，只是，不是我想要的。如果有办法扩展选择以使所有标签都有匹配的结尾。那将是理想的。
是的，代码拆分了元素。如果范围内只有内联元素，应该没问题。如果可以有块元素，则需要对其进行迭代并为每个元素创建一个较小的 Range。
阅读我评论的后半部分，您需要遍历块元素并手动将每个元素的内容包围在自己的node 中。您可能希望使用 frag.querySelectorAll('p, div, ...') 之类的方式获取块
好吧，我闻到你在嘶嘶作响。现在，你如何取消它？
是的，我也想知道：-/ AFAIK execCommand('undo') 仅适用于使用 execCommand 完成的工作。