JavaScript Text Color Change To Each Word In Array

I have this JavaScript Code: $(function() { var text = $(this).find('#text').html(); var key_words = ['university', 'students', 'institutions',

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

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