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;。如您所见，您将&s 与其他&字符实体分开。

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

在编写 HTML 之前，jQuery 会修复任何错误的转义。所以它编写的 HTML 最终会变成ijhhhv&amp;yuy&amp;uvuv&amp;. 如您所见，匹配中的 & 符号已正确转义，但字符实体的切掉剩余部分仍然存在。

解决此问题的一种方法是更改您正在搜索的内容。由于您在 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