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