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

罪魁祸首是text()方法。当你调用它时，它只返回元素内的文本，无意中撤消已经放入的任何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")返回"baz bar foo";您可以看到只替换了第一个foo。如果要替换所有实例，则需要指定g选项; "foo bar foo".replace(RegExp("foo", "g"), "baz")返回"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内的项目以包含非主题标签的字符串，则可能需要使用\转义某些字符，以便它们不会被解释为特殊字符。有关需要转义的字符表，请参阅this link。 #符号不是特殊字符之一，因此如果您坚持使用hashtags，那么您无需担心这一点。

最后，您可能希望使用回调替换：

，而不是使用循环来更改多个字符串

$('.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 2

使用html(function)和new RegExp()使用|连接数组进行OR

＆＃13;

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">$1</span>');
});

＆＃13;

.lightgrey{
  background-color: lightgrey;
}

＆＃13;

<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>

＆＃13;

Answer 3

textToReplace是"#Excitement"＆amp;在你的情况下，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 4

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

将主题标签与当前字符串匹配，一切都按顺序排列。

只有添加到代码中的是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/

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

4 个答案: