How Can I Reliably Find and Bold Specific Text Within a jQuery Element?

Modifying Text Elements with jQuery: Find and Embolden

In jQuery, it's common to manipulate DOM elements dynamically. One such task involves finding specific text within a given element and modifying its appearance, such as bolding it.

Consider the following code:

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

In this example, we're trying to find the text "cross genre" within the element with ID "about_theresidency" and apply CSS to make it bold. However, this approach may not yield the desired result. To understand why, let's explore an alternative solution:

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

This approach uses the replace() method to identify and replace the text "world" with bold HTML tags. It's a more reliable way to find and modify specific text because:

• It targets the entire HTML content of the element, not just its direct text nodes.
• It uses a regular expression (/world/gi) to perform case-insensitive search and global replacement.

You can also create a reusable plugin to handle this functionality:

$.fn.wrapInTag = function(opts) {

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

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

Usage:

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

This plugin allows you to easily wrap specific words within the given element with any HTML tag.

The above is the detailed content of How Can I Reliably Find and Bold Specific Text Within a jQuery Element?. For more information, please follow other related articles on the PHP Chinese website!