jQuery高亮顯示標籤中元素的文本片段

Question

我想使用jQuery選擇並返回搜索到的文本。

問題是;部分文本可能位於<span>或其他內聯元素中，因此在本文中搜索'waffles are tasty'時：'I'm not sure about <i>cabbages</i>, but <b>waffles</b> <span>are</span> <i>tasty</i>, indeed.'，您不會得到任何匹配，而文本對於人員不會中斷。

讓我們用這個HTML爲例：

<div id="parent"> 
    <span style="font-size: 1.2em"> 
    I 
    </span> 
    like turtles 
    <span> 
    quite a 
    </span> 
    lot, actually. 

    <span> 
    there's loads of 
    </span> 
    tortoises over there, OMG 

    <div id="child"> 
    <span style="font-size: 1.2em"> 
     I 
    </span> 
    like turtles 
    <span> 
     quite a 
    </span> 
    lot, actually. 

    TURTLES! 
    </div> 
</div> 

有了這個（或類似）的JavaScript：

$('div#parent').selectText({query: ['i like', 'turtles', 'loads of tortoises'], caseinsensitive: true}).each(function() { 
    $(this).css('background-color', '#ffff00'); 
}); 
//The (hypothetical) SelectText function would return an array of wrapped elements to chain .each(); on them 

你會想產生這樣的輸出：（沒有評論，很明顯）

<div id="parent"> 
    <span style="font-size: 1.2em"> 
    <span class="selected" style="background-color: #ffff00"> 
     I 
    </span> <!--Wrap in 2 separate selection spans so the original hierarchy is disturbed less (as opposed to wrapping 'I' and 'like' in a single selection span)--> 
    </span> 
    <span class="selected" style="background-color: #ffff00"> 
    like 
    </span> 
    <span class="selected" style="background-color: #ffff00"> <!--Simple match, because the search query is just the word 'turtles'--> 
    turtles 
    </span> 
    <span> 
    quite a 
    </span> 
    lot, actually. 

    <span> 
    there's 
    <span class="selected" style="background-color: #ffff00"> 
     loads of 
    </span> <!--Selection span needs to be closed here because of HTML tag order--> 
    </span> 
    <span class="selected" style="background-color: #ffff00"> <!--Capture the rest of the found text with a second selection span--> 
    tortoises 
    </span> 
    over there, OMG 

    <div id="child"> <!--This element's children are not searched because it's not a span--> 
    <span style="font-size: 1.2em"> 
     I 
    </span> 
    like turtles 
    <span> 
     quite a 
    </span> 
    lot, actually. 

    TURTLES! 
    </div> 
</div> 

（假設的）SelectText函數會將所有選定的文本包含在<span class="selected">標籤，而不管搜索部分是否位於其他內聯元素，如<span>，「'等。它不搜索子<div>的內容，因爲它不是內聯元素。

有沒有這樣做的jQuery插件？ （在span標籤中包裝搜索查詢並返回它們，無視發現文本的一部分是否可能位於其他內聯元素中？）

如果不是，那麼將如何創建這樣的函數？ This function有點像我在找的東西，但是當找到的文本的部分嵌套在其他內聯元素中時，它不會返回所選跨度和斷點的數組。

任何幫助將不勝感激！

Answer 1

小菜一碟！見this。

摺疊符號：

$.each(
    $(...).findText(...), 
    function(){ 
     ... 
    } 
); 

在網上表示法：

$(...).findText(...).each(function(){ 
     ... 
    } 
); 

Answer 2

三個選項：

• 使用瀏覽器內置的這個方法。對於該發現，IE具有TextRange及其findText()方法;其他瀏覽器（除Opera之外，上次我檢查過，很久以前）都有window.find()。但是，在某些時候，這並不理想，因此需要window.find()may be killed off without being replaced。要突出顯示，您可以使用document.execCommand()。
• 使用我的Rangy庫。這裏有一個演示：http://rangy.googlecode.com/svn/trunk/demos/textrange.html
• 構建自己的代碼來搜索DOM中的文本內容並對其進行設計。

前兩個選項中詳細介紹上這樣的回答：

https://stackoverflow.com/a/5887719/96100

Answer 3

我寫了一個草案爲fiddle。主要步驟：

我做了一個jQuery插件

$.fn.selectText = function(params){ 
    var phrases = params.query, 
     ignorance = params.ignorecase; 
     wrapper = $(this); 
    . . . 
    return(wrapper); 
}; 

現在我可以調用選擇爲$(...).selectText({query:["tortoise"], ignorance: true, style: 'selection'});

我知道你想要的功能調用後有迭代器，但在你的情況下，這是不可能的，因爲迭代器必須返回有效的jQuery選擇器。例如： word <tag>word word</tag> word是無效的選擇器。

消毒包裝的內容後，對於每個搜索makeRegexp()作出個人正則表達式。

每一塊搜索HTML源的去emulateSelection()然後wrapWords()

主要思想是在<span class="selection">...</span>包各單片短語不是標籤分開的，但沒有分析節點的整個樹。

注：

它與HTML標籤<b><i>...工作NOT。你必須在它的正則表達式字符串中進行更正。 我不保證它會與Unicode一起使用。但是，誰知道......

Answer 4

因爲我剛碰巧正在做一個類似的事情，如果你想看到我的解釋「選項3」的開始，我想我會分享這一點，其主要特點是遍歷所有文本節點，而不改變現有的標籤。尚未在任何不尋常的瀏覽器上進行測試，因此不會對此進行任何保證！

function DOMComb2 (oParent) { 
    if (oParent.hasChildNodes()) { 
     for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { 
      if (oNode.nodeType==3 && oNode.nodeValue) { // Add regexp to search the text here 
       var highlight = document.createElement('span'); 
       highlight.appendChild(oNode.cloneNode(true)); 
       highlight.className = 'selected'; 
       oParent.replaceChild(highlight, oNode); 

       // Or, the shorter, uglier jQuery hybrid one-liner 
       // oParent.replaceChild($('<span class="selected">' + oNode.nodeValue + '</span>')[0], oNode); 
      } 
      if (oNode.tagName != 'DIV') { // Add any other element you want to avoid 
       DOMComb2(oNode); 
      } 
     } 
    } 
} 

然後貫穿東西的jQuery也許搜索選擇：

$('aside').each(function(){ 
    DOMComb2($(this)[0]); 
}); 

當然，如果你有你的旁白中的旁白，奇怪的事情可能會發生。

Answer 5

我的理解（改編自Mozilla的開發參考網站 https://developer.mozilla.org/en-US/docs/Web/API/Node DOMComb功能），我們談論像$.each($(...).searchText("..."),function (str){...});迭代器。

檢查大衛·赫伯特·勞倫斯詩：

<div class="poem"><p class="part">I never saw a wild thing<br /> 
sorry for itself.<br /> 
A small bird will drop frozen dead from a bough<br /> 
without ever having felt sorry for itself.<br /></p></div> 

事實上，在渲染之後，瀏覽器會明白這樣的：

<div class="poem"> 
<p class="part"> 
<br>I never saw a wild thing</br> 
<br>sorry for itself.</br> 
<br>A small bird will drop frozen dead from a bough</br> 
<br>without ever having felt sorry for itself.</br> 
</p> 
</div> 

例如，我在尋找一句話："wild thing sorry for"。因此，我不得不highligt的exerpt：

wild thing</br><br>sorry for 

我不能把它包裝這樣<span>wild thing</br><br>sorry for</span>，然後通過一些臨時ID =創建jQuery選擇「搜索-XXXXXX」，並將其返回 - 這是錯的HTML。我可以換不同的文本是這樣的：

<span search="search-xxxxx">wild thing</span></br><br><span search="search-xxxxx">sorry for</span> 

然後我不得不調用一些功能，並返回jQuery的陣列選擇的：

return($("[search=search-xxxxx]")); 

現在我們有兩個「成果」：一）「野生東西「; b）「對不起」。它真的是你想要的嗎？

OR

你必須寫你自己each()功能像另一個插件的jQuery：

$.fn.eachSearch = function(arr, func){ 
    ... 
}; 

其中ARR會不會選擇器的陣列，但陣列選擇陣列的，如：

arr = [ 
    {selector as whole search}, 
    {[{selector as first part of search]}, {[selector as second part of search]}}, 
    ...  
]