How Can I Bold Specific Text Within a Paragraph Using jQuery?

Manipulating Text with jQuery: Emboldening Specific Strings

In jQuery, users often encounter the need to locate specific text within a document and modify its appearance. One common scenario is to add emphasis to certain text by making it bold.

Consider the following jQuery code that attempts to embolden a specific phrase within a paragraph with the ID "about_theresidency":

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

This code aims to find elements with the ID "about_theresidency" that contain the text "cross genre" and then apply the CSS property "font-weight" to bold that specific text. However, this code may not work as intended due to the dynamic nature of the text in "about_theresidency."

To resolve this issue, consider using the following approach:

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

Here, we leverage the replace() method to find all occurrences of the text "world" in the paragraph and replace them with the same text surrounded by strong tags. This effectively bolds the desired text without relying on jQuery's :contains selector.

Alternatively, you can utilize a custom jQuery plugin for greater flexibility:

$.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']
});

This plugin allows you to wrap any specified text in any desired HTML tag, providing greater control over the text manipulation process.

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