How Can I Use jQuery to Find and Bold Specific Text Within a Paragraph?

Finding and Bolding Text with jQuery

When working with dynamic content, it's essential to utilize jQuery's capabilities to enhance text and create bolder visual effects. One common scenario is to locate a specific text string within a paragraph and apply bold formatting to it.

However, you may encounter issues with the following code:

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

To overcome this, consider implementing a robust solution using jQuery's html() method:

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

This code replaces all occurrences of "world" with strong tags, emphasizing that text within the paragraph.

For a more adaptable approach, you can also create a small plugin:

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

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

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

This plugin assigns bold formatting to text containing the specified words, providing a versatile tool for customizing text emphasis in your applications.

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