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.

http://james.padolsey.com/javascript/highlighting-text-with-javascript/ — Roko C. Buljan, Apr 25 '12 at 20:48

Michael D. Irizarry · Accepted Answer · 2012-04-25T20:52:58.753

2

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/

edited Apr 25 '12 at 20:52

answered Apr 25 '12 at 20:39

Michael D. Irizarry

6,186
5
30
35

This seems to only allow one highlight class. I need red and blue – Tallboy Apr 25 '12 at 20:43

Kevin B · Answer 2 · 2012-04-25T20:54:39.390

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.

Jonathan Payne · Answer 3 · 2012-04-25T21:02:00.933

1

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

edited Apr 25 '12 at 21:02

answered Apr 25 '12 at 20:42

Jonathan Payne

2,223
13
11

That seems to highlight the entire paragraph red (the paragraph will have many words in it. I only want to create that single word a certain color). Or rather, i could just assign wrap it with a span that has a class and that would probably be good too because then i will just style in CSS – Tallboy Apr 25 '12 at 20:45
@Tallboy cleaned it up and made a method you can use for more words. – Jonathan Payne Apr 25 '12 at 21:02

score 0 · Answer 4 · edited May 23 '17 at 12:12

0

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.

edited May 23 '17 at 12:12

Community

1
1

answered Apr 25 '12 at 20:37

VisioN

143,310
32
282
281

It would be better to add a class, so that styles could be reused. – Brad Apr 25 '12 at 20:38
This makes the entire selection blue. I'd like to make only that word blue and leave rest of paragraph alone – Tallboy Apr 25 '12 at 20:39
OK. Then you can simply use `replace` or plugins mentioned by other guys. – VisioN Apr 25 '12 at 20:44

score 0 · Answer 5 · answered Apr 25 '12 at 21:04

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/

T I · Answer 6 · 2012-04-25T21:14:32.477

0

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

edited Apr 25 '12 at 21:14

answered Apr 25 '12 at 21:06

T I

9,785
4
29
51

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

6 Answers6