This
article will show you how you can search and highlight the specific text in the
html div control 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. This style sheet also contains style for div border with rounded corner.
<style>
.highlight {
background-color: yellow;
}
.border {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
|
After this we will prepare the body text.
<h3>Highlight
"The" word in Div</h3>
<article>
<div id="divContent"
class="border">
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>
|
Now check
we will use the jquery code to highlight the text present the div control.
<script>
$(document).ready(function () {
$('#divContent').highlight('The');
});
</script>
|
In above
code I have provided the div control id to highlight and in this div control “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 in div</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 () {
$('#divContent').highlight('The');
});
</script>
<style>
.highlight {
background-color: yellow;
}
.border {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h3>Highlight
"The" word in Div</h3>
<article>
<div id="divContent"
class="border">
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