Suppose I have div's and p's in HTML and they both contain same text. I want to highlight the searched text from html paragraph only. How can I do that using jQuery ?
Like
<div>Hello</div>
<div>World</div>
<p>Hello</p>
<p>World</p>
I want to highlight the 'world' in the paragraph tag.
You can add a class to the entire p element.
$('p:contains("Hello")').addClass('highlight');
Otherwise, you'll need to iterate over the text nodes and then wrap the match with a span.
Use the :contains selector.
var str = "World";
$('p:contains('+str+')').css('background-color', 'yellow');
$('p').each(function(index) { // Find every paragraph and run through them
if($(this).text() === "world") { // Check if current paragraph's text is "world"
$(this).addClass("itemFound"); // Apply styling
}
});
This will do case insensitive search and add a highlight class.
var str = /world/gi;
jQuery("p").each(function() {
if(jQuery(this).text().match(str) {
jQuery(this).addClass("highlight");
}
});
Use this inside the body
<script>
$("body").find("p").eq(1).css("background-color","green");
</script>
<p>tag, don't u want to highlight that one??var nodes = document.getElementsByTagName("p"); for (var index=0; index<nodes.length; index++) { var node = nodes[index]; if (node.innerHTML.indexOf(searchTerm) != -1) { node.style.backgroundColor = "green"; } }