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

【问题标题】：JavaScript Text Color Change To Each Word In Array数组中每个单词的 JavaScript 文本颜色更改
【发布时间】：2014-04-28 00:38:50
【问题描述】：

我有这个 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 数组。但始终只为整个文本中的学生着色，仅此而已。

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

【问题讨论】：

你有什么问题？如果您将问题表述为“我希望我的代码执行 X，但是当我运行它时，它会执行 Y”，这会有所帮助。

标签： javascript regex arrays replace highlight

【解决方案1】：

另一种不使用循环的方法是：

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

【讨论】：

感谢您的出色回答，我非常感谢。但是，如果我有像学生和学生这样的词，他们将不会在文本中找到。怎么可能做到这一点？正则表达式中的标志“i”用小写替换我的所有大写单词；/关键字：学生文本：学生大写学生也必须着色。正确的制作方法是什么？
这个函数会保留大写/小写。 i 仅表示它将找到所有实例，而不管大小写如何。 $& 指的是找到的完全匹配，它不会改变它。

【解决方案2】：

在您的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;
}

【讨论】：

非常感谢您的回答（鞠躬）对我有帮助。