jQuery Attribute Contains [name*="value"]

What You’ll Learn

The attribute contains selector — written [name*="value"] — matches elements whose attribute value includes a substring anywhere inside it. It is the most flexible value-matching attribute selector in jQuery and has been available since version 1.0.

Introduction

Attribute selectors let you target HTML elements by their metadata — not just tag names or classes. The contains form uses an asterisk equals sign (*=) and answers a simple question: “Does this attribute value include this text anywhere?”

jQuery documents it as the most generous attribute selector when matching against a value. That flexibility makes it ideal for partial matches — form field names that share a prefix, URLs that contain a domain fragment, or file extensions embedded in a href. It has worked in jQuery since 1.0 and maps to standard CSS3 syntax browsers understand natively.

Understanding the Contains Selector

Given [attribute*="needle"], jQuery selects an element when the string needle appears as a contiguous substring inside the attribute’s value. Position does not matter:

• Start — name="manual" contains man.
• Middle — name="human" contains man.
• End — name="superman" contains man.

The element must actually have the attribute present. An input without a name attribute is never matched by [name*="…"].

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "[attribute*='value']" )
// shorthand:
$( "[attribute*='value']" )

// combine with element types:
$( "input[name*='man']" )

Parameters

• attribute — the HTML attribute name (e.g. name, href, class).
• value — substring to search for inside the attribute value; quote if it contains special characters.

Return value

• A jQuery object with every element whose attribute contains the substring.
• Empty collection when no values match.

Official jQuery API example

$( "input[name*='man']" ).val( "has man in it!" );

// Sets value on inputs whose name contains "man"
// e.g. name="human", name="woman", name="superman"

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 explore substring rules, operator comparisons, link filtering, and scoped form fields. Use the Try-it links to run each snippet in the browser.

$( "input[name*='man']" ).val( "has man in it!" );

// Matches name="human", name="woman", name="superman"
// Skips name="child" and inputs without a name attribute

human, woman, superman inputs → value "has man in it!"
child input and unnamed input → unchanged

var names = [ "manual", "human", "woman", "superman", "child" ];

names.forEach( function( n ) {
  var $input = $( "<input>" ).attr( "name", n ).appendTo( "body" );
  console.log( n, "→", $input.is( "[name*='man']" ) ? "MATCH" : "no" );
  $input.remove();
});

manual → MATCH
human → MATCH
woman → MATCH
superman → MATCH
child → no

$( "#samples span" ).each( function() {
  var $el = $( this );
  console.log(
    $el.attr( "class" ),
    "| *:", $el.is( "[class*='btn']" ),
    "| ~:", $el.is( "[class~='btn']" )
  );
});

btn primary     | *: true  | ~: true
primary-btn     | *: true  | ~: false  ← difference
toolbar         | *: true  | ~: false  ← substring trap

$( "a[href*='.pdf']" ).addClass( "pdf-link" );

// Matches /docs/guide.pdf and /files/report.PDF only if case matches
// Does not match plain /about page links

Links to guide.pdf and annual-report.pdf → class "pdf-link"
Regular HTML page links → unchanged

$( "#signup input[name*='email']" ).addClass( "email-field" );

// Matches name="email", name="billing_email", name="confirm_email"
// Only inside #signup — login form fields ignored

Signup email, billing_email, confirm_email → class "email-field"
Same name pattern in #login form → not styled

🚀 Common Use Cases

• Form field groups — input[name*='address'] for every address-related input.
• File type links — a[href*='.pdf'] or a[href*='download'].
• CDN assets — script[src*='cdn.example.com'] for third-party scripts.
• Data attributes — [data-role*='admin'] for partial role keys.
• Icon fonts — i[class*='fa-'] when class names share a prefix fragment.
• Migration helpers — find legacy IDs with [id*='old_'] during refactors.

📝 Notes

• Available since jQuery 1.0 — standard CSS3 attribute selector.
• Most generous jQuery attribute selector when matching against a value (per official docs).
• For space-separated token attributes like class, consider [attr~="word"] instead.
• Matching is case-sensitive in typical HTML documents.
• Missing attributes never match — the element is skipped entirely.
• Very short substrings (e.g. *="a") may over-match; prefer specific needles.

💡 Best Practices