正規表現を使用してテキストをハイライトする方法

Question

正規表現と一致するときに強調表示するスクリプトを作成しようとしています。以下は私が今やっていることの例です。

var text = "SOMETHING ~WEIRDs~ AND Not WEIRD"; 
 
var regexp = /\b(WEIRD)\b/ 
 
var matches = text.match(regexp); 
 

 
for (i = 0; i < matches.length; i++) { 
 
    var replace_all = RegExp(matches[i] + "(?![^<]*>|[^<>]*<\/)", "ig"); 
 
    text = text.replace(eval(replace_all), "<span style='background- color:yellow'>" + matches[i] + "</span>"); 
 
} 
 
console.log(text);

コードの出力は、上記

SOMETHING ~<span style='background- color:yellow'>WEIRD</span>s~ AND Not <span style='background- color:yellow'>WEIRD</span> 

である私が欲しいの出力は、私はとにかく書くことということである知っていただきたいと思います

SOMETHING ~WEIRDs~ AND Not <span style='background- color:yellow'>WEIRD</span> 

です正規表現には正規表現と単語が含まれていますか？または、他の方法でこの誤った置換問題を解決できますか？

Answer 1

あなたの外側の正規表現は問題ありません。問題はループ内のreplace_all正規表現であり、元の文字列内の位置に関係なく、見つかった文字列のすべてのインスタンスを置き換えるためです。

は、代わりにこのように、置換文字列内の一致を使用してreplace()と、元の正規表現を使用します。

var text = "SOMETHING ~WEIRDs~ AND Not WEIRD"; 
 
var regexp = /\b(WEIRD)\b/ 
 
var text = text.replace(regexp, '<span style="background-color: yellow">$1</span>'); 
 
console.log(text);

また、原則として、決して、これまでeval()を使用しています。 が常により良い解決策または選択肢です。