檢查哪些元素包含文本已經凸顯

以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。

來源

2013-06-11 PhonicUK

這可能是重複的是： - http://stackoverflow.com/questions/5643635/how-to-get-selected-html-text-with-javascript – pvnarula

通過「突出顯示」，你意思是「選擇」？ – nnnnnn

@pvnarula - 已經看過 - 沒有給我提供我需要的信息。那裏的答案只是讓你選擇的區域的HTML不是我想要的。我想要任何標籤*的ID包含選擇。多重或其他。 – PhonicUK

這是我的嘗試..只測試鉻和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-11 22:43:32 antishok

在標準的/兼容的瀏覽器：

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可以幫助）。

來源

2013-06-11 22:35:03 MaxArt

檢查哪些元素包含文本已經凸顯

回答

相關問題