Regexとアンカータグを使って別の要素の単語をハイライトする方法

Question

アンカータグをクリックして、その下のdiv内の対応する単語を強調表示したいと考えています。私はこれを行うために見たすべての例のように入力が必要なようですが、私はボタンやアンカータグでそれを行うことができるようにしたいと思います。ここで私のフィドルはまだ働いていない。私は行方不明のものがありますか？

http://jsfiddle.net/NVeMD/6/

$('#search').click(function() { 
    var test = new RegExp(
     $('#search').text().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 
     'gi'); 
    $('#sample').children().addBack().not('.highlight').contents().filter(function() { 
     return this.nodeType === 3; 
    }).replaceWith(function(){ 
     return this.str.replace(test, '<span class="highlight">$&</span>'); 
    }); 
}); 

$('#revert').click(function(){ 
    $(".highlight").contents().unwrap(); 
}); 

Answer 1

正直に言うと、私は非常によくあなたのコードを理解することができませんでした。 #searchをクリックすると

---

は、我々はそのtext()取得し、<span class="highlight">text of #search</span>で#sampleを置き換えますが、私はあなたが必要なもののために働く何か、すなわちをコード化しました。
をクリックすると、#samplehtml()が#sampletext()に置き換えられます。

---

$('#search').click(function() { 
 
    var re = new RegExp("\\b" + $("#search").text() + "\\b","ig"); 
 
    $("#sample").html($("#sample").text().replace(re, '<span class="highlight">$&</span>')) 
 
}); 
 

 
$('#revert').click(function(){ 
 
    $("#sample").html($("#sample").text()); 
 
});

.highlight { 
 
    background-color:yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="search">Yoda</a> 
 
<button id="revert">Revert!</button> 
 
<p id="sample">Highlight the word Yoda Yodada</p>

---

注：

1. 正規表現は、ワード境界（\b）を有し、一致しますYodaしかし ないYodada

Answer 2

は、これは私が働いて得ることができたコードです。あなたが試したものとまったく同じではありません、特に置き換えるテキストを見つけることに関してはそうです。

$('#search').click(function() { 
    var newtext = $('#search').text().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); 
    var test = new RegExp(newtext, 'gi'); 
    $('#sample').html($('#sample').text().replace(test, '<span class="highlight">$&</span>')); 
}); 

これは、選択された単語を強調表示します。フィルターを使用したコードは、達成しようとしていたものについては意味をなさないので、強調表示するために単純化しました。

Answer 3

あなたのコードと既に返信された回答は間違っているわけではありませんが、悪影響を与える可能性があります。 .html()をjQueryに、innerHTMLをVanillaJSに使用すると、要素のすべてのイベントが破棄され、DOMの生成が何度も繰り返されます。ですから、この方法でやめてください。さもなければ、あなたはさらなるピットルに遭遇します。 のためにビルドされた既存のコンポーネントを使用してください！

は、キーワード/検索条件またはカスタムの正規表現のために蛍光ペンをmark.jsを見てください。 jQueryプラグインとしても利用できます。 次の例は、入力内に入力されたテキストをコンテキスト内で動的にmark.js（下のデモを参照）で強調表示する方法を示しています。

var markInstance = new Mark(document.querySelector(".context")); 
 
function highlight(){ 
 
    var searchTerm = document.querySelector("input").value; 
 
    markInstance.unmark().mark(searchTerm); 
 
}

mark{ 
 
    background: yellow; 
 
}

<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script> 
 
<input type="text" placeholder="Lorem ipsum..." oninput="highlight()"> 
 
<p class="context"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
</p>