Question

我有这个JavaScript代码：

            $(function() {
            var text = $(this).find("#text").html();

            var key_words = ['university', 'students', 'institutions', 'education'];

            function colorText(text, keywords) {
                var rd;
                $.each(keywords, function(index, item) {
                    var r = new RegExp(item, "gi")
                    rd = text.replace(r, '<span style="background: yellow">' + item + '</span>');
                });
                return rd;
            }


           var colorWords = colorText(text, key_words);

           $(this).find("#text").html(colorWords);

        });

我想用简单易用的颜色替换所有key_words数组。但总是只对整个文本中的学生进行着色而且都是。

我做错了什么。提前谢谢。

Answer 1

在colorText函数中，每次循环时都会重置变量rd，因此它只会显示最后一项。相反，只需更新text值并在完成后返回，如下所示：

function colorText(text, keywords) {
    $.each(keywords, function (index, item) {
        var r = new RegExp(item, "gi")
        text = text.replace(r, '<span style="background: yellow">' + item + '</span>');
    });
    return text;
}

Answer 2

没有循环的另一种方法是：

 function colorText(text, keywords) {
     var regex = new RegExp(keywords.join('|'), 'gi');
     return text.replace(regex, '<span style="background: yellow">$&</span>');
 }

JavaScript文本颜色更改为数组中的每个单词

2 个答案: