jQuery選擇元素內匹配的文本

Question

我需要一種方法來傳遞一個元素id和一個字符串到一個函數，該函數在元素文本中選擇任何出現的字符串，這些字符串尚未包裝在子元素中。

我有一個現有的事件處理程序，當用戶突出顯示一段文本時，它執行一些操作，包括將元素中的文本包裝在一起。但是有些字符串可以自動匹配而不需要用戶選擇，這正是我想要在這裏完成的。一個不同的事件有時會產生一個元素id和一個字符串，並且元素文本中所有未準備好標記的字符串實例都應該傳遞給事件處理程序，就像用戶選擇了它們一樣。

實施例：

var selectionString = 'word'; 
<p id="1">select this word, but not this <span>word</span>, but yes to this word.</p> 

// My approach so far which may not be on the right track. 
function selectStringInElement(selectionString, elementId){ 
    var el = document.getElementById(elementId); 
    var selections = el.innerHTML.split(/<.+>/); 
    for(var i=0; i < selections.length; i++){ 
     // if the selection contains the selectionString, find its range, select it, and pass to existing handler. 
    } 
} 

任何幫助，將不勝感激。

Answer 1

HTML節點都通過node.childNodes訪問的孩子，你能告訴我們，如果一個子節點是文字或node.nodeType的元素。

本示例將搜索字符串和元素ID進行搜索，對其進行過濾，以便僅保留文本節點，然後執行替換以生成新的html字符串。您不能僅將HTML字符串嵌入文本節點，因此我使用臨時div來將html字符串解析爲節點，然後在刪除源文本節點之前將其注入到元素的父節點中。

function selectStringInElement(selectionString, elementId, className) { 
 
    $("#" + elementId).contents() 
 
    .filter(function(i, el){ 
 
    // only process text nodes 
 
    return el.nodeType == 3 
 
    }).each(function(i, el){ 
 
    // create a div to process our html string with new tags 
 
    var fake = document.createElement('div'); 
 

 
    fake.innerHTML = el.textContent.replace(
 
     new RegExp(selectionString,'g'), 
 
     "<span class='" + className + "'>" + selectionString + "</span>" 
 
    ); 
 

 
    // take all the nodes in our div and append them to the actual element's parent 
 
    $(fake.childNodes).each(function(i, child) { 
 
     el.parentNode.insertBefore(child, el); 
 
    }); 
 

 
    // we've now duplicated our actual element with a number of new elements, we don't need to keep the original 
 
    el.parentNode.removeChild(el); 
 
    }); 
 
} 
 
selectStringInElement('chowder','test', 'red'); 
 
selectStringInElement('ukulele','test', 'blue');

.red { 
 
    color: #f00; 
 
} 
 
.blue { 
 
    color: #00f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='test'> 
 
The bottle of shampoo just returned from a safari, that he left the tea and the church bazaar. She was a grand ran all around the veranda, laughing like, so helping their ranch on the cook make the church bazaar. She was playing a ukulele, which the admiral did not like, so he looked through his collection of the kindergarten cried, "At last! Hurrah!" -- and by accident spilled the ketchup all over the taffy apples! This so amused another chores at the bottle had just where he had found the taffy apples! This so amused another guest, who usually wore a gingham dress and moccasins when visiting their ranch on the cook make the church bazaar. She was no helping the chowder and kayak he had seen. 
 

 
Someone was playing a ukulele, which the ketchup all over the goulash for lunch. the label. 
 

 
The admiral heard them talking in the label. 
 

 
The admiral heard them talking in the bank and firing his pistol out of his sack and ran all around the chowder and the goulash for lunch. the Nebraska prairie, had just returned from her chores at imaginary zombies. It was a grand party.d through his collection of shampoo just returned from a safari, that he pulled the ketchup all over the church bazaar. She was no helping the church bazaar. She was no helping the admiral hated to a pretty mazurka by Chopin. Then he looked through his sack and ran all around the kitchen. 
 

 
Someone was a grand party.ard them talking in the admiral did not like a maniac and firing his pistol out of his so amused another guest, who usually wore a gingham dress and listened to a pretty mazurka by Chopin. The bottle had seen. 
 

 
Someone was playing a ukulele, which the admiral heard them talking in the label. 
 

 
The admiral's wife, who usually wore a gingham dress and moccasins when visiting their ranch on the label. 
 

 
When everyone sat down to eat, the pulled a toy pistol out of his sack and ran all around through his collection of pictures -- next to the tea and listened to snoop, so he turned on the radio and the cook make the church bazaar. She was playing a ukulele, which the admiral did not like, so amused another guest, who had just returned on the Nebraska prairie, had just returned on the Nebraska prairie, had a picture of shampoo just returned from a safari, that he pulled the radio and listened from her chowder and the label. 
 
</div>

Answer 2

這裏是JQuery的實現：

JSFiddle

 selectStringInElement('word','1'); 


function selectStringInElement(selectionString, elementId) 
{ 

    var $el = $("#"+elementId); 

    $el.contents() 
    .filter(function(){ 
      return this.nodeType === 3 // Only text nodes 
    }) 
    .each(function(){ 
     this.textContent = this.textContent.replace(new RegExp(selectionString,'g'),"<span class='highlight'>"+selectionString+"</span>"); 
    }); 

     // Decoding lt/gt 
     var html = $("<textarea/>").html($("#1").html()).val() 

     // Replacing original content 
     $el.html(html); 

    // Attaching onMouseOver events 
     console.log($el.find("span.highlight")); 
     $el.find("span.highlight").on("mouseover",function(){ 
      alert($(this).text()); 
     }); 
} 

結果：被包圍span標籤 「字」，並onmouseover事件連接到該標籤。

HTML生成的代碼：

<p id="1">select this <span class="highlight">word</span>, but not this <span>word</span>, but yes to this <span class="highlight">word</span>.</p>