jQuery Attribute Contains Word [name~="value"]

What Is [name~="value"]?

The attribute contains word selector matches elements whose attribute is a space-separated list, and at least one word exactly equals the search string. Available since jQuery 1.0 (standard CSS).

$("[attribute~='value']")

$("input[name~='man']")
  ✓ name="man"
  ✓ name="milk man"
  ✗ name="human"      (one word — not "man")
  ✗ name="woman"

~=  ≠  *=   // *= also matches "human"
[class~='btn'] ≈ .btn   // same token idea for class

How to Use [name~="value"]

Use it when the attribute holds space-separated tokens and you need one exact word.

1. Confirm the attribute is a whitespace-separated list (class, rel, multi-word name, …).
2. Write $("[attr~='word']") — or with a tag: $("input[name~='man']").
3. Remember: the word must match a full token, not part of a longer token.
4. For a plain substring anywhere, use *= instead.

Pseudocode

attrName = given attribute
word     = given value
matches  = empty list

for each element with attrName:
    tokens = split(attribute value, by whitespace)
    if word is exactly equal to any token:
        add element

return jQuery(matches)

Cheat Sheet

Keep these facts handy while matching space-separated words.

Live Preview

Compare word / substring / equals selectors against sample inputs and see which name values match.

$("input[name~='man']")
matched: 2
names: man, milk man

/* whole word only */

jQuery Examples

Short, copy-ready snippets. Open a browser with jQuery loaded, or use Try It Yourself for a live editor.

$("input[name~='man']").val("mr. man is in it!");

var names = $("input[name~='man']").map(function () {
  return this.name;
}).get().join(", ");

console.log(names);
// man, milk man

man, milk man
(human / woman skipped; matched values updated)

console.log("~= :", $("input[name~='man']").length);
console.log("*= :", $("input[name*='man']").length);

// ~= skips "human" and "woman"
// *= includes them because "man" appears inside

~= : 2
*= : 4

*= also matches "human" and "woman"

var labels = $("[class~='active']").map(function () {
  return this.textContent.trim();
}).get().join(", ");

console.log(labels);
console.log("same count as .active:", $(".active").length);

Save
same count as .active: 1
(inactive is skipped)

var hrefs = $("a[rel~='nofollow']").map(function () {
  return $(this).attr("href");
}).get().join(", ");

console.log(hrefs);

/ads, /partner
(/home is skipped)

console.log("role~=button:", $("[role~='button']").length);
console.log("role=button :", $("[role='button']").length);

// For a single token, ~= and = often return the same element

role~=button: 1
role=button : 1

Both match role="button"

Performance Notes

Attribute selectors are standard CSS, so jQuery can often use the browser engine. For classes, prefer .token. Narrow with a tag or container on large pages.

Key Takeaways