jQuery :contains() selector

The :contains() selector in jQuery selects the elements that contain the specified string. The matching string can be directly appeared in the selected element or in the descendants of that element.

This :contains() selector is widely used with other selectors to select the elements containing the text in a group.

Syntax

This selector accepts a single parameter, which is defined below.

Parameter Values

text: The text in the above syntax specifies the text to find. It is the mandatory parameter. It is case-sensitive.

As in the above syntax, we have written the text as the bare word, but it can also be surrounded by quotation marks.

Let's see an illustration to understand the working of :contains() selector.

Example

In this example, we are applying the :contains() selector on the h3 heading elements. The selector will select only those h3 elements that contain the text "This". It is because we are passing the text "This" as the parameter of the :contains() selector.

As stated above, the method is case-sensitive so, it will only select the elements matching the specified string.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("h3:contains(This)").css("background-color", "yellow");
});
});
</script>
</head>

<body>
<h4> This is an example of using the jQuery :contains() selector. </h4>
<p> First paragraph </p>
<h3> This is a heading. </h3>
<p> Second paragraph </p>
<h3> This is second heading. </h3>
<p> Third paragraph </p>
<h3> This is another heading. </h3>
<h5> Click the following button to count see the effect. </h5>
<button id = "b1"> Click me </button>

</html>

Test it Now

Output

After the execution of the above code, the output will be -