jQuery code to hide <p> tag with specific text

Suppose your webpage has many <p> (Paragraph) tags/elements, and you want to hide those paragraph elements which have specific text or word. For example, hide all p tag element which have "jquery" word in it. This can be done easily using jQuery. jQuery has ":contains" selector which can be used to select p tags with specific text.

The code $("p:contains('Javascript')") will select all the <p> tag element which have text "Javascript" in it. But remember, ":contains" selector is case sensitive.
$('#btnHide').click(function() {
     $("p:contains('Javascript')").hide();
});
$('#btnReset').click(function() {
    $("p:contains('JavaScript')").show();
});
See result below


You might be aware that jQuery ":contains()" is case sensitive. So for ":contains", the word "Javascript" and "JavaScript" are different. If you have paid attention to above jQuery code, I have used different words in ":contains", yet it is working. In spite of ":contains" being case sensitive, the above jQuery code is working. Wondering?

Well, there is a way by which you can extend the default behavior of contains and make it case-insensitive.

Code to make jQuery :contains Case-Insensitive
jQuery.expr[':'].contains = function(a, i, m) {
 return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..