jQuery Attribute Starts With [name^="value"]

What Is [name^="value"]?

The attribute starts-with selector matches elements whose attribute value begins exactly with a given string (prefix). Available since jQuery 1.0 (standard CSS3).

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

$("input[name^='news']")
  ✓ name="newsletter"
  ✓ name="newsboy"
  ✗ name="milkman"      (starts with "milk")
  ✗ name="Newsletter"   (case differs)

^=  ≠  $=   // $= is end only
^=  ≠  *=   // *= is anywhere

How to Use [name^="value"]

Name the attribute, pick a prefix, then query — casing must match exactly.

1. Choose the attribute (name, href, id, …).
2. Write $("[attr^='prefix']") — or with a tag: $("input[name^='news']").
3. Confirm the value truly starts with that string (not just contains it).
4. Watch case: news and News are different prefixes.

Pseudocode

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

for each element with attrName:
    v = element.getAttribute(attrName)
    if v starts with prefix:          // case-sensitive
        add element

return jQuery(matches)

Cheat Sheet

Keep these facts handy while matching attribute prefixes.

Live Preview

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

$("input[name^='news']")
matched: 2
names: newsletter, newsboy

/* starts exactly with news */

jQuery Examples

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

$("input[name^='news']").val("news here!");

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

console.log(names);
// newsletter, newsboy

newsletter, newsboy
(milkman skipped; matched values become "news here!")

console.log("^= :", $("input[name^='news']").length);
console.log("$= :", $("input[name$='news']").length);

// ^= matches newsletter, newsboy
// $= matches none in the official sample (no name ends with "news")

^= : 2
$= : 0

Different ends of the string — different match sets

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

console.log(hrefs);
// https://example.com  (http:// and /about are skipped)

https://example.com
(http:// and relative /about are skipped)

var ids = $("[id^='row-']").map(function () {
  return this.id;
}).get().join(", ");

console.log(ids);
// row-1, row-2
// (panel-row is skipped — prefix, not suffix)

row-1, row-2
(panel-row is skipped — prefix, not suffix)

console.log("news :", $("input[name^='news']").length);
console.log("News :", $("input[name^='News']").length);

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

news : 2
News : 1

Lowercase "news" does not match name="Newsletter"

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 prefer a class when you can add one.

Key Takeaways