jquery - & の代わりに & を与える正規表現と置換

Question

このテキストがijhhhv&yuy&uvuv&あり、「&」文字を強調表示したいと思います。

このコードを実行すると:

var searchTerm = '&';
var searchTermRegEx = new RegExp(searchTerm, "g");
var content = "<span class='match'>" + searchTerm + "</span>";
$('#div').html($('#div').html().replace(searchTermRegEx,content));

私はこれを得る：ijhhhv&yuy&uvuv&- 余分な「amp;」強調表示された「&」の後、なぜですか? これを修正するには？
(検索語は「&」だけではありません。正規表現検索では単語と文字を使用します。「&」で問題が発生しました)

ここでフィドル

score 4 · Accepted Answer

.text()の代わりに使用してください.html()。最後のものは特殊文字を有効な HTML エンティティに変換するためです。

var searchTermRegEx = /&/g, //you can use short form
    content = "<span class='match'>&</span>",
    replaced = $('#div').text().replace(searchTermRegEx, content);
$('#div').html(replaced);

スクリプトは次のように機能します。

$('#div').html() // here it is ijhhhv&amp;yuy&amp;uvuv&amp;
         .replace(searchTermRegEx, content); //here it becomes ijhhhv<span class='match'>&</span>amp;yuy<span class='match'>&</span>amp;uvuv<span class='match'>&</span>amp;

使用する場合は.text() &エンコードされないため、関数は適切な (エンコードされていない) テキストを返します。これは、必要に応じてスパンに置き換えられます。

score 1 · Accepted Answer

これ&は、文字列内の文字が HTML エンコードされているためです。したがって、文字列に&は各文字が含まれてい&ます。置換を行うと、に置換&さ&amp;れるため、タグを追加するspanと HTML エンティティが壊れます。

文字を強調表示する場合は&、HTML エンティティを置き換える必要があります&。

var searchTerm = '&amp;';

score 1 · Accepted Answer

コードをステップに分割して、なぜこれが起こっているのかを確認してください。

var oldHtml = $('#div').html()

oldHtmlですijhhhv&yuy&uvuv&。sを適切に HTML エスケープしなかったため&、jQuery はそれらを&エンティティにエスケープしました。

var newHtml = oldHtml.replace(searchTermRegEx,content);

newHtmlですijhhhv&amp;yuy&amp;uvuv&amp;。ご覧のとおり、を&残りの&文字エンティティから分割しました。

$('#div').html(newHtml);

HTML を書き込む前に、jQuery は不適切なエスケープを修正します。したがって、それが書き込む HTML は最終的にijhhhv&amp;yuy&amp;uvuv&amp;. ご覧のとおり、一致内のアンパサンドは適切にエスケープされていますが、文字エンティティの切り捨てられた残り物はまだそこにあります。

これを修正する 1 つの方法は、検索対象を変更することです。テキスト内ではなく HTML 内でマッチングを行っているため、検索対象を HTML エスケープする必要があります。

var searchTerm = '&amp;';

score 0 · Accepted Answer

検索語をエンコードする必要がありました。

var searchTerm = '&amp';
var searchTermRegEx = new RegExp(searchTerm, "g");
var content = "<span class='match'>" + searchTerm + "</span>";
$('#div').html($('#div').html().replace(searchTermRegEx,content));

jquery - & の代わりに & を与える正規表現と置換

4 に答える 4

Related

Reference