Как сделать выбор диапазона, охватывающий несколько элементов?

Question

код: 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, но я чувствую, что это немного излишне вбольшинство случаев)

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