jQuery :contains() Selector

What You’ll Learn

The :contains() selector matches elements whose text content includes a given string — direct text, descendant text, or both. Available since jQuery 1.1.4; a jQuery extension (not CSS). Case-sensitive substring matching.

Introduction

Most selectors target tags, classes, IDs, or attributes. Sometimes you need to find elements by what they say — a product name in a list, an error word in a paragraph, or a user’s name in a card. jQuery’s :contains() pseudo-class fills that gap.

Added in jQuery 1.1.4, :contains(text) scans the aggregated text of each candidate element. Official documentation notes the match is case-sensitive and the search string can appear in the element itself, in any descendant, or both. It is not standard CSS — you cannot use it in native querySelectorAll.

Understanding the :contains() Selector

Think of :contains() as a substring search over visible text content:

• div:contains('John') → matches “John Resig” and “Malcom John Sinclair”.
• Text inside nested <span> children counts toward the parent’s match.
• :contains('john') does not match “John” — case must match.
• It is a substring match — :contains('Ann') matches “Banner”.

📝 Syntax

Official jQuery API form (since 1.1.4):

jQuery( ":contains(text)" )



// common patterns:

$( "div:contains('John')" )

$( "#list li:contains('apple')" )

$( "p.alert:contains('error')" )

$( "div.item" ).filter( ":contains('sale')" )

Parameters

• text — a string to look for (case-sensitive). May be quoted or, for simple words, unquoted.

Return value

• A jQuery object containing every element whose text content includes the search string.
• Empty collection when no text matches.

Official jQuery API example

// Finds all divs containing "John" and underlines them

$( "div:contains('John')" ).css( "text-decoration", "underline" );

Examples Gallery

Example 1 follows the official jQuery div:contains('John') demo. Examples 2–5 cover case sensitivity, scoped list search, alert paragraphs, and .filter(":contains()"). Use the Try-it links to run each snippet.

$( "div:contains('John')" ).css( "text-decoration", "underline" );



// Matches "John Resig" and "Malcom John Sinclair"

// Does NOT match "George Martin" or "J. Ohn"

John Resig → underlined

Malcom John Sinclair → underlined

George Martin, J. Ohn → unchanged

console.log( "Upper:", $( "p:contains('John')" ).length );

console.log( "Lower:", $( "p:contains('john')" ).length );



// Same visible word, different selector casing → different counts

Upper (John): 1

Lower (john): 0



Official docs: :contains() is case-sensitive

$( "#fruits li:contains('ap')" ).css( "font-weight", "bold" );



// Substring match: "apple" and "grape" both contain "ap"

apple, grape → bold

banana, orange → normal

$( "p:contains('error')" ).addClass( "text-danger" );



// Matches "An error occurred" — not title="error" on another tag

"An error occurred" → text-danger class

"All good" → unchanged

$( "div.product" )

  .filter( ":contains('sale')" )

  .addClass( "on-sale" );



// CSS class first, :contains second — better performance

product divs mentioning "sale" → on-sale class

Other product divs → unchanged

🚀 Common Use Cases

• Name search — highlight cards containing a user’s name.
• Menu filter — bold list items matching a quick search string.
• Error scan — style paragraphs containing “error” or “warning”.
• Table lookup — find rows where visible cell text includes a SKU fragment.
• Demo scripts — official tutorials underline matching divs instantly.
• Scoped filter — .product.filter(":contains('new')") on catalog pages.

📝 Notes

• Available since jQuery 1.1.4 — jQuery extension, not standard CSS.
• Case-sensitive — match exact casing in the selector string.
• Substring match — not whole-word only; Ann matches Banner.
• Text in descendants counts toward the parent element’s match.
• Quotes optional for simple words; use quotes for spaces and special characters.
• Prefer scoped selectors or .filter(":contains()") over bare $(":contains(text)").

💡 Best Practices