jQuery :contains() Selector

What Is :contains()?

:contains(text) (since jQuery 1.1.4) selects elements whose text content includes the given string. The text may sit on the element itself, in any descendant, or both. Matching is case-sensitive. Quotes around the text are optional.

$("div:contains('John')")   // text includes "John"
$("div:contains(John)")     // same — quotes optional
$(":contains('John')")      // avoid — scans every element

// Case-sensitive: "john" ≠ "John"
// Prefer a tag or parent: $("#list li:contains('apple')")

How to Use :contains()

Pick a tag or container first, then filter by the substring you need.

1. Start with a tag or scoped selector: $("div:contains('…')") or $("#box p:contains('…')").
2. Pass the search string — with or without quotes; casing must match.
3. Remember parents match when a child holds the text (aggregated text content).
4. Do not use bare $(":contains('…')") on large pages — it scans everything.
5. For attributes (not text), use [attr*="value"] instead.

Pseudocode

matches = []
needle = given text   // case-sensitive

for each element in search context:
    haystack = element.textContent   // includes all descendants
    if haystack contains needle:
        matches.add(element)

return matches

Cheat Sheet

Keep these facts handy when searching by text.

Live Preview

Run div:contains(…) against the official-style name list.

$("div:contains('John')").length
→ 2

matched → John Resig, Malcom John Sinclair

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var labels = [];
$("div:contains('John')").each(function () {
  labels.push($.trim($(this).text()));
});

$("#out").text(
  "Matched: " + labels.length + "\n" +
  labels.join(", ")
);

Matched: 2
John Resig, Malcom John Sinclair

$("#out").text(
  "contains('John'): " + $("div:contains('John')").length + "\n" +
  "contains('john'): " + $("div:contains('john')").length
);

contains('John'): 2
contains('john'): 0

var n = $("#card:contains('Sale')").length;
var spanOnly = $("#card span:contains('Sale')").length;

$("#out").text(
  "#card matches: " + n + "\n" +
  "span matches: " + spanOnly
);

#card matches: 1
span matches: 1

var labels = [];
$("#fruits li:contains('ap')").each(function () {
  labels.push($.trim($(this).text()));
});

$("#out").text(labels.join(", ") || "(none)");

apple, grape

$("#out").text(
  "Text :contains('docs'): " + $("a:contains('docs')").length + "\n" +
  "Attr [href*='docs']: " + $("a[href*='docs']").length
);

Text :contains('docs'): 1
Attr [href*='docs']: 1

Performance Notes

:contains() walks text content. Narrow the candidate set with a tag or parent before applying the text filter.

Key Takeaways