Question

采取以下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中。

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

});

Answer 2

在标准/兼容浏览器中：

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

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

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

2 个答案: