jQuery :contains(): Match Elements by Text Content

:contains("text") selects elements whose text includes the specified substring. Matching is case-sensitive and includes descendant text, so it is not an exact-text selector.

Syntax and behavior

$('p:contains("help")');
$("#messages p").filter(':contains("jb")');

The selector examines text within elements, not an input’s value or an image’s alt attribute. A substring match means that jb also matches jbdui. Searching both ancestors and descendants can select several elements for the same text. :contains() is a jQuery extension, not a selector supported by the browser’s standard CSS selector API.

The official jQuery :contains() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery contains-selector example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="messages">
  <p id="a">Ordinary paragraph</p>
  <p id="b">jb message</p>
  <p id="c">JB message</p>
  <p id="d">Text containing jbdui</p>
  <p id="e"><span>jb</span> inside a paragraph</p>
</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $found = $("#messages p").filter(':contains("jb")');
      $found.addClass("marked");
      $("#output").text($found.map(function () { return this.id; }).get().join(", "));
    });
  </script>
</body>
</html>

Expected result

The paragraphs b, d, and e are highlighted, and the output reads b, d, e. Uppercase JB in c does not match lowercase jb. The span inside e still contributes text to its parent paragraph.

Comparing a dynamic search string

const query = "JB".toLocaleLowerCase();
const $found = $("#messages p").filter(function () {
  return $(this).text().toLocaleLowerCase().includes(query);
});

Replace the selection code in the complete example with this snippet. It selects b, c, d, and e because both sides are converted to lowercase. Quotes in the search string are treated as text rather than selector syntax.

Important details and troubleshooting

• For exact matching, use .filter() and compare $(this).text().trim() with the search string. Whitespace and line breaks can affect the result.
• Concatenating search-box input into a selector can break its syntax when the input contains quotes or parentheses. Compare strings with .text().includes() inside a filter function instead.
• For case-insensitive matching, normalize both strings consistently before comparing them. An empty string is contained in every string, so decide how to handle an empty search.

Compare the behavior with .find() descendant traversal.