Find text string in jQuery and make it bold

Question

What I want to do is use jQuery to find a piece of text within a paragraph and add some CSS to make it bold. I can't seem to figure out why this won't work:

$(window).load(function() {
// ADD BOLD ELEMENTS
$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});

The text in "about_theresidency" is dynamically pulled in, hence me executing it after the window has loaded.

Answer 1

You can use replace() with html():

var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&</strong>'));

Edit: http://jsbin.com/AvUcElo/1/edit

I turned it into a lil' plugin, here:

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong'
    , words = opts.words || []
    , regex = RegExp(words.join('|'), 'gi') // case insensitive
    , replacement = '<'+ tag +'>$&</'+ tag +'>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};

// Usage
$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});

Answer 2

I had a similar problem and tried to use the solution proposed by elclanrs. It works great, but only if you have no html elements within the text you want to alter. If there were any tags inside the text, they would have been lost after running the wrapInTag function.

Here is my inner-node-friendly solution to the problem (I included links to the resources I used to write the code).

// http://stackoverflow.com/a/9795091
$.fn.wrapInTag = function (opts) {
    // http://stackoverflow.com/a/1646618
    function getText(obj) {
        return obj.textContent ? obj.textContent : obj.innerText;
    }

    var tag = opts.tag || 'strong',
        words = opts.words || [],
        regex = RegExp(words.join('|'), 'gi'),
        replacement = '<' + tag + '>$&</' + tag + '>';

    // http://stackoverflow.com/a/298758
    $(this).contents().each(function () {
        if (this.nodeType === 3) //Node.TEXT_NODE
        {
            // http://stackoverflow.com/a/7698745
            $(this).replaceWith(getText(this).replace(regex, replacement));
        }
        else if (!opts.ignoreChildNodes) {
            $(this).wrapInTag(opts);
        }
    });
};

Example: http://jsbin.com/hawog/1/edit

Answer 3

Try:

$(window).load(function() {
// ADD BOLD ELEMENTS
    $('#about_theresidency:contains("cross genre")').each(function(){
        $(this).html( 
            $(this).html().replace(/cross genre/g,'<strong>$&</strong>')
        );
    });
});

Answer 4

Needed a more secure method, that could escape. Here is a vanilla solution

var str = 'The world is big <b onclick="alert(false)">world</b> red. the world is also small'
var words = ['world', 'is']
var reg = RegExp(words.join('|'), 'gi')
var p = document.createElement('p')
p.innerText = str
p.innerHTML = p.innerHTML.replace(reg, '<u>$&</u>')

document.body.appendChild(p)
console.log(p.outerHTML)

Answer 5

I've taken and adjusted @jahu's provided code into a form where you can add data attributes and then run a callback on the dom to then invoke their $('foo').wrapInTag(...) in and to allow code like this to exist in your template:

<p data-js-highlight-text="hello,">
  <span style="color: #009fff">Hello,</span> World
</p>

// Extended examples with data attributes in your html:
//
// Set the data-js-highlight-text attribute. Before:

<p data-js-highlight-text="hello,">Hello, World</p>

// After:
<p data-js-highlight-text="hello,"><span style="color: #009fff">Hello,</span> World</p>