jQuery Attribute Contains [name*="value"]

What Is [name*="value"]?

The attribute contains selector matches elements whose attribute value includes a given substring anywhere — start, middle, or end. Available since jQuery 1.0 (standard CSS3).

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

$("input[name*='man']")
  ✓ name="man"
  ✓ name="human"
  ✓ name="woman"
  ✗ name="person"     (no "man" substring)

*=  ≠  ~=   // ~= needs a whole space-separated word
*=  ≠  ^=   // ^= is start only

How to Use [name*="value"]

Name the attribute, pick a substring, then query — optionally scoped to a tag.

1. Choose the attribute (name, href, data-id, …).
2. Write $("[attr*='substring']") — or with a tag: $("input[name*='man']").
3. Expect matches at any position inside the attribute string.
4. If you need a whole word in a space list, switch to ~= instead.

Pseudocode

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

for each element with attrName:
    v = element.getAttribute(attrName)
    if v contains substring:          // anywhere
        add element

return jQuery(matches)

Cheat Sheet

Keep these facts handy while matching attribute substrings.

Live Preview

Run substring / word / starts-with selectors against sample inputs and see which name values match.

$("input[name*='man']")
matched: 4
names: man, human, woman, milk man

/* substring anywhere */

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("has man in it!");

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

console.log(names);
// man, human, woman

man, human, woman
(each matched input value becomes "has man in it!")

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

// *= matches "human", "woman", and "milk man"
// ~= matches only names where "man" is a whole word ("man", "milk man")

*= : 4
~= : 2

~= skips "human" and "woman" (not whole words)

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

console.log(hrefs);

/docs/intro, /blog/docs/tips
(/about is skipped)

var ids = $("[data-id*='user']").map(function () {
  return $(this).attr("data-id");
}).get().join(", ");

console.log(ids);
// user-1, guest-user, user

user-1, guest-user, user
(admin is skipped)

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

// name="Man" matches only the second query

man : 2
Man : 1

Lowercase "man" does not match name="Man"

Performance Notes

Attribute selectors are standard CSS, so jQuery can often use the browser engine. Narrow with a tag or a container on large pages, and avoid *= on class when a real class selector would do.

Key Takeaways