JavaScript文本顏色更改為數組中的每個單詞

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>');
 }