connectseekers.com

Wednesday, 2 November 2016

jQuery Highlight Text on Page

11/02/2016 - By Pranav Singh 0

This article will show you how you can search and highlight the specific text in the html page body using jquery.

So for this article first we will create a new page and add the below library reference into the  page.

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://johannburkard.de/resources/Johann/jquery.highlight-5.js"></script>

Now user the below mention style sheet to make the text background color yellow on body load.

<style>
        .highlight { background-color: yellow }
    </style>

After this we will prepare the body text.

<body>
    <h3>Highlight "The" Text</h3>
    <article>
        <div>
            This article will show you The how you can search and The highlight the text in a gridview control in asp.net using c#. This i have shown on body event.
        </div>
    </article>
</body>

Now check we will use the jquery code to highlight the text present the page body.

  <script>
        $(document).ready(function () {
            $('body').highlight('The');
        });
    </script>

In above code I have provided the body tag to highlight and in this body tag “The text will search and highlight.

Now check the complete code of the page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery highlight text on page</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://johannburkard.de/resources/Johann/jquery.highlight-5.js"></script>
    <script>
        $(document).ready(function () {
            $('body').highlight('The');
        });
    </script>
    <style>
        .highlight { background-color: yellow }
    </style>
</head>
<body>
    <h3>Highlight "The" Text</h3>
    <article>
        <div>
            This article will show you The how you can search and The highlight the text in a gridview control in asp.net using c#. This i have shown on body event.
        </div>
    </article>
</body>
</html>

Now we have done run the application to check the output.



About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top