Question

（注意：如果选择正确，代码将在选区周围插入一个范围并更改背景颜色）

选择代码：

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时，但我觉得这有点过分了大多数情况下）

Answer 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()
}

如何使范围选择跨越多个元素？

1 个答案: