javascript 替换方法有效，除非在循环中它转义 html

Question

此代码可以完美地用一些 html:

替换字符串

$('.active_admin_comment_body').each(function(comment_index){
    the_string = $(this).text().replace("#Excitement", "<span style=\"background-color: lightgrey;\">#Excitement</span>");
     $(this).html(the_string);
)};

上面代码的问题是它只能替换一个值。我有一个值数组，所以我编写了以下代码来遍历数组，然后用数组中的值修改每个注释：

$('.active_admin_comment_body').each(function(comment_index){
    hashtags = ["#Excitement", "#Sad News", "#Moderate"];
    comment = $(this);
    $.each(hashtags, function(index, value){
        new_comment = comment.text().replace(value, "<span style='background-color: lightgrey;'>" + value + "</span>");
        comment.html(new_comment);
    });
});

第一段代码 100% 有效。第二个代码块只有在您删除 replace 方法中的 html 时才有效。如何让第二个代码块工作？

Answer 1

textToReplace 是 "#Excitement" & replaceWith 是 "<span style=\"background-color: lightgrey;\">#Excitement</span>" 在你的情况下它会变成

the_string = $(this).text().replace(/#Excitement/g, "<span style=\"background-color: lightgrey;\">#Excitement</span>");

new_comment = comment.text();
$.each(hashtags, function(index, value){
        new_comment = new_comment.replace(value, "<span style='background-color: lightgrey;'>" + value + "</span>");
    });
comment.html(new_comment);

已更新

Answer 2

看来您实际上只是遗漏了一件小事。循环的工作方式只是替换数组中的最后一个。更改数组中的最后一个值会导致它切换哪个正在工作。

刚刚将主题标签与当前字符串匹配，一切就绪。

唯一添加到您的代码的是 if 语句，比较匹配。

$(function(){
$('.active_admin_comment_body').each(function(comment_index){
    hashtags = ["#Excitement", "#Sad News", "#Moderate"];
    comment = $(this);
    $.each(hashtags, function(index, value){
     if(comment.text().includes(value)){
       new_comment = comment.text().replace(value, "<span style='background-color: lightgrey;'>" + value + "  </span>");
        comment.html(new_comment);
      }
    });
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='active_admin_comment_body'>
Test1 #Excitement
</div>
<div class='active_admin_comment_body'>
Test2 #Sad News
</div>
<div class='active_admin_comment_body'>
Test3 #Moderate
</div>

https://jsfiddle.net/75e0o36s/

Answer 3

罪魁祸首是 text() 方法。当您调用它时，它只会 returns 元素内的文本，无意中撤消任何已经放入的 HTML。

$('.active_admin_comment_body').each(function(comment_index){
    var hashtags = ["#Excitement", "#Sad News", "#Moderate"];
    var comment = $(this);
    $.each(hashtags, function(index, value){
        // I changed text() to html() in the next line.
        var new_comment = comment.html().replace(value, "<span style='background-color: lightgrey;'>" + value + "</span>");
        comment.html(new_comment);
    });
});

您还应该注意 replace 只会替换第一个匹配项。例如，"foo bar foo".replace("foo", "baz")returns"baz bar foo"；你可以看到只有第一个 foo 被替换了。如果要替换所有实例，需要指定g选项； "foo bar foo".replace(RegExp("foo", "g"), "baz") returns "baz bar baz"。在您的代码中：

$('.active_admin_comment_body').each(function(comment_index){
    var hashtags = ["#Excitement", "#Sad News", "#Moderate"];
    var comment = $(this);
    $.each(hashtags, function(index, value){
        // I changed text() to html() and added the RegExp constructor.
        var new_comment = comment.html().replace(RegExp(value, "g"), "<span style='background-color: lightgrey;'>" + value + "</span>");
        comment.html(new_comment);
    });
});

如果您将 hashtags 中的项目更改为包含非主题标签的字符串，您可能需要使用 \ 对某些字符进行转义，这样它们就不会被解释为特殊字符。有关需要转义的 table 个字符，请参阅 this link。 # 符号不是特殊字符之一，因此如果您只使用主题标签，则无需担心这一点。

最后，您可能希望使用回调替换，而不是使用循环来更改多个字符串：

$('.active_admin_comment_body').each(function(comment_index){
    var hashtags = ["#Excitement", "#Sad News", "#Moderate"];
    var comment = $(this);
    var new_comment = comment.html().replace(/#(Excitement|Sad News|Moderate)/g, function(tag){
        return "<span style='background-color: lightgrey;'>" + tag + "</span>";
    });
    comment.html(new_comment);
});

您还会注意到我在您的代码中添加了 var 关键字；这使您的变量成为局部变量而不是全局变量。这不会改变您的代码的功能。

Answer 4

Using html(function) and new RegExp() 使用 | 连接数组用于 OR

var hashtags = ["#Excitement", "#Sad News", "#Moderate"];

$('.active_admin_comment_body').html(function(_, txt) {
  var reg = new RegExp('(' + hashtags.join('|') + ')', 'g');
  return txt.replace(reg, '<span class="lightgrey"></span>');
});

.lightgrey{
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='active_admin_comment_body'>
  Test1 #Excitement
</div>
<div class='active_admin_comment_body'>
  Test2 #Sad News
</div>
<div class='active_admin_comment_body'>
  Test3 #Moderate
</div>

javascript 替换方法有效，除非在循环中它转义 html

javascript replace method works except when in loop it escapes html

javascript

jquery

replace

html-escape-characters