JavaScript Text Color Change To Each Word In Array

Question

I have this JavaScript Code:

            $(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);

        });

I want to replace all key_words array with colors simple and easy. But always colored only students in whole text and thats all.

What i'm i doing wrong. Thanks in advance.

Answer 1

Another way of doing it without a loop, would be:

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

Answer 2

In your colorText function, you are resetting a variable rd every time you loop so it will only show the last item. Instead, try just updating the text value and returning it when you're finished, like this:

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