How to achieve text highlighting with jQuery?

jQuery is a popular JavaScript library used to simplify DOM operations, event handling, animation effects, etc. in web development. In web development, we often encounter the need to highlight specific text, and jQuery can easily implement this function. This article will introduce how to use jQuery to achieve text highlighting effects and provide specific code examples.

1. Introduce the jQuery library

First, introduce the jQuery library into the web page. It can be introduced through a CDN link, or you can download the jQuery library file locally and then introduce it in the HTML file.

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

2. Create HTML structure

Prepare a piece of content in HTML that needs text highlighting, for example:

<p id="content">
    这是一段需要进行文字高亮的内容。
</p>

3. Write jQuery code

Next, write jQuery code to achieve the text highlighting effect. You can select the text that needs to be highlighted through the selector, and use CSS styles to change the text color, background color, etc. to achieve the highlighting effect.

$(document).ready(function() {
    $("#content").html(function(index, html) {
        return html.replace(/需要进行高亮的关键词/g, "<span style='background-color: yellow;'>需要进行高亮的关键词</span>");
    });
});

In the above code, replace keywords that need to be highlighted with keywords that need to be highlighted, and add the <span></span> tag, And set the background-color property to yellow to achieve the highlight effect. CSS styles can be customized and adjusted according to actual needs to achieve different highlighting effects.

4. Effect Demonstration

Finally, open the browser, load the HTML file containing the above code, and you can see the content that achieves the text highlighting effect.

Through the above simple code examples, we can easily use jQuery to achieve text highlighting effects. At the same time, by learning more functions and methods of the jQuery library, you can bring more convenience and effects to web development. Hope this article can be helpful to you!

The above is the detailed content of How to achieve text highlighting with jQuery?. For more information, please follow other related articles on the PHP Chinese website!