2

采取以下 HTML 块：

<span id="1">The </span><span id="2">quick brown fox </span><span id="3">jumped </span><span id="4">over the lazy dog.</span>

哪个渲染，看起来像：

The quick brown fox jumped over the lazy dog.

如果我要突出显示渲染文本的一部分，我怎么知道突出显示区域覆盖了哪些元素？例如，如果我突出显示“狐狸跳”，那么我想知道它是包含在 #2 和 #3 中的。

4

2 回答 2

1

这是我的尝试.. 仅在 chrome 和 FF 中测试。

在这里小提琴：http: //jsfiddle.net/fdBkv/1/

HTML：

<div>
    <span id="a">wowo wheheh</span>
    <span id="b">lolol wwoww</span>
    <span id="c">hmmmmm</span>
    <span id="d">zzzzzm</span>
</div>

JS：

$(document).mouseup(function() {

    var s = window.getSelection ? window.getSelection() : document.getSelection();

    var from = $(s.anchorNode).closest('span');
    var to = $(s.focusNode).closest('span');

    var spans;
    if (from[0] === to[0])
        spans = from;
    else if (from.nextAll('span').is(to))
        spans = from.add(from.nextUntil(to)).add(to);
    else
        spans = to.add(to.nextUntil(from)).add(from);



    console.log(
        'from: ' + from.prop('id'),
        'to: ' + to.prop('id'),
         'spans: ', spans.get());

});
于 2013-06-11T22:43:32.197 回答
0

在标准/兼容浏览器中：

var sel = getSelection(), range, selected = [];
if (sel.rangeCount) {
    range = sel.getRangeAt(0);
    var start = range.startContainer.parentNode,
        end = range.endContainer.parentNode;
    while (start !== end) {
        selected.push(start);
        start = start.nextSibling;
    }
    selected.push(end);
}

请注意，如果选择完全包含在跨度中，则此解决方案有效，否则您必须对startand进行一些额外的检查end（提示：compareDocumentPosition可以提供帮助）。

于 2013-06-11T22:35:03.393 回答