How Can jQuery Highlight Specific Words and Phrases in Text?

Highlight Specific Words with jQuery

Introduction

Enhancing the visibility of specific terms or phrases within a text can be crucial for emphasizing important information or guiding users through a document. With jQuery, this task can be accomplished effortlessly through its vast plugin library.

Solution Using jQuery Highlight Plugin

One approach is to employ the jQuery Highlight plugin, which offers a simple and efficient solution for highlighting text. To utilize this plugin:

1. Highlight Single Term: To highlight a single term, such as "dolor" in the given text, use the following code:

$('p').highlight('dolor');

2. Highlight Multiple Terms: To highlight multiple terms, pass an array of terms as the parameter:

$('p').highlight(['dolor', 'amet']);

3. Configure Options: You can further customize the highlighting behavior by setting options such as:

• className: Specify the CSS class to apply to highlighted text (default: 'highlight')
• element: Choose the HTML element to use as the highlighting wrapper (default: 'span')
• caseSensitive: Enable or disable case sensitivity in the search (default: false)
• wordsOnly: Search only for whole words, not parts of words (default: false)

Removing Highlighting

To unhighlight highlighted text, use the unhighlight() method:

$('p').unhighlight();

Caution: Malicious Script Warning

When using code from third-party sources, including internet plugins, it's essential to exercise caution. The code linked to the "Try highlight" plugin contains a cryptocurrency mining script. To avoid this issue, use the code snippet provided above or remove the mining script from the downloaded code before implementing it.

Updated Plugin Version

An updated version of the original Highlight plugin is also available, providing additional features such as highlighting entire words only and customizing the highlighting element and class names. Using this updated version is recommended for enhanced flexibility.

The above is the detailed content of How Can jQuery Highlight Specific Words and Phrases in Text?. For more information, please follow other related articles on the PHP Chinese website!