jQuery Attribute Contains Prefix [name|="value"]

What Is [name|="value"]?

The attribute contains prefix selector matches elements whose attribute is exactly value, or starts with value followed by a hyphen (-). Available since jQuery 1.0 (standard CSS).

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

$("a[hreflang|='en']")
  ✓ hreflang="en"
  ✓ hreflang="en-US"
  ✗ hreflang="english"   (no hyphen after en)
  ✗ hreflang="fr"

[attr|="en"]  ≠  [attr^="en"]   // ^= also matches "english"

How to Use [name|="value"]

Name the attribute, set the prefix, then query for exact or hyphen-extended values.

1. Choose the attribute (hreflang, lang, data-version, …).
2. Write $("[attr|='prefix']") — optional tag: $("a[hreflang|='en']").
3. Remember: longer matches need a hyphen after the prefix (en-US, not enUS).
4. Do not use |= when you only want a raw string start — use ^= instead.

Pseudocode

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

for each element with attrName:
    v = element.getAttribute(attrName)
    if v == prefix:
        add element                    // exact
    else if v starts with (prefix + "-"):
        add element                    // hyphen prefix

return jQuery(matches)

Cheat Sheet

Keep these facts handy while matching hyphenated attribute values.

Live Preview

Run prefix / starts-with / equals selectors against sample hreflang links and see which values match.

$("a[hreflang|='en']")
matched: 2
values: en, en-US

/* exact or hyphen prefix */

jQuery Examples

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

var values = $("a[hreflang|='en']").map(function () {
  return $(this).attr("hreflang");
}).get().join(", ");

console.log(values);
// en, en-US

en, en-US
(fr and missing hreflang are skipped)

console.log("|= :", $("a[hreflang|='en']").length);
console.log("^= :", $("a[hreflang^='en']").length);

// |= skips hreflang="english"
// ^= includes "english" because it starts with "en"

|= : 2
^= : 3

^= also matches hreflang="english"

console.log("exact = :", $("a[hreflang='en']").length);
console.log("prefix |=:", $("a[hreflang|='en']").length);

exact = : 1
prefix |=: 2

= matches only hreflang="en"

var tags = $("[lang|='en']").map(function () {
  return this.tagName + "[" + this.lang + "]";
}).get().join(", ");

console.log(tags);

P[en], DIV[en-GB]
(fr paragraph is skipped)

var list = $("[data-version|='2']").map(function () {
  return $(this).attr("data-version");
}).get().join(", ");

console.log(list);
// 2, 2-beta  (not 20 or 2beta)

2, 2-beta
(20 and 2beta are skipped — no hyphen after 2)

Performance Notes

Attribute selectors are standard CSS, so jQuery can often delegate to the browser engine. Narrow with a tag (a[…]) or a container ($("#nav").find("a[hreflang|='en']")) on large pages.

Key Takeaways