How do I do this in jQuery? (Match a particular word and make it a color)

Question

I have several html paragraph of text, i want to go through every paragraph within .content, and if it contains the word "Hello" or "hello" (or any variation of case), i want to make ONLY that word blue. And the same for "Goodbye" except make it red.

Answer 1

You can use a jQuery plugin called highlight for that.

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

$('li').highlight('bla');

A slight modified version to work with different styles.
http://jsfiddle.net/ReNvf/

Answer 2

I have a plugin that makes this easy, here's a fiddle: http://jsfiddle.net/NFDqe/8/

$(document).ready(function(){
    $("#content").highlightText("hello","hello",true);
    $("#content").highlightText("goodbye","goodbye",true);
});​

https://github.com/tentonaxe/jQuery-highlightText

Update
Since there's literally no documentation on this plugin, I figured i should post some.

$(selector).highlightText(string, class, onlyfullmatches)

string can be any string or regular expression. If it is a string, it will be not be case-sensitive, meaning hello will match HeLlO. If it is a regexp, it will be used as-is.

class can be a single class, or a space delimited list of classes.

onlyfullmatches should be a boolean value, defaulted to false. If true, the plugin will only match full matches, not partial matches. For example, if it is false, hello will match the string hellow .

Answer 3

Iterate through each p tag, check for text, assign css:

jsFiddle( http://jsfiddle.net/fM7MP/26/ )

$('p').each( function(index)
{
    replaceWithColors( $(this) , "hello" , "blue" );
    replaceWithColors( $(this) , "goodbye" , "red" );
});

function replaceWithColors( object , word , color )
{
    var index = $(object).html().toLowerCase().indexOf( word );  

    if ( index > -1 )
    {
        var before = $(object).html().substring( 0 , index );
        var theWord = $(object).html().substring( index , index + word.length );
        var after = $(object).html().substring( index + word.length );

        $(object).html( before + "<span style='color:" + color + "'>" + theWord + "</span>" + after);
    }
}

​

Answer 4

For highlighting the whole line:

$("div:contains('hello')").css("color", "blue");

EDIT: Since the question was changed to highlighting the word only, you can find the answer for example here: Highlight a word with jQuery or simply use plugins mentioned by others.

EDIT: Or simply like that:

​$("div"​)​.each(function() {
    this.innerHTML = this.innerHTML.replace(/(hello)/g, "<span style='color: red'>$1</span>");
    this.innerHTML = this.innerHTML.replace(/(goodbye)/g, "<span style='color: blue'>$1</span>");
})​;​

To ignore but to preserve case use /(hello)/ig regular expressions.

Answer 5

You can do this without the need for a plugin:

$("p").each(function() {
    if ($(this).children().length == 0) {
        var txt = $(this).text();
        var blue = /hello/i.exec(txt);
        var red = /goodby/i.exec(txt);
        if (blue) {
            $(this).html(txt.replace(/hello/i, '<span class="blue">' + blue + '</span>'));
        } else if (red) {
            $(this).html(txt.replace(/goodbye/i, '<span class="red">' + red + '</span>'));
        }
    }
});

SEE http://jsfiddle.net/99mg7/1/

Answer 6

something like this

$('p').each(function() {
    var html = $(this).html().replace(/L/gi, function(str) {
        var cls;
        if (str == str.toLowerCase()) {
            cls = 'blue';
        } else if (str == str.toUpperCase()) {              
            cls = 'red'; 
        }            
        return '<span class="' + cls + '">' + str + '</span>';
    });

    $(this).html(html);
});

demo