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
0 comments:
Please let me know your view