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>