javascript - 检查哪些元素包含已突出显示的文本

Question

采用以下 HTML block :

<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.

如果我要高亮显示文本的一部分，我怎么知道哪些元素被高亮区域覆盖了？例如，如果我突出显示“fox jumped”，那么我想知道包含的是 #2 和 #3。

Answer 1

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

在这里 fiddle :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());

});