Regex to Match HTML Attributes
Match HTML element attributes with their values using this regex. Handles double-quoted, single-quoted, and unquoted values. Free regex tester.
Regular Expression
/([a-zA-Z][a-zA-Z0-9-]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/g
Token Breakdown
| Token | Description |
|---|---|
| ( | Start of capturing group |
| [a-zA-Z] | Character class — matches any one of: a-zA-Z |
| [a-zA-Z0-9-] | Character class — matches any one of: a-zA-Z0-9- |
| * | Matches the preceding element zero or more times (greedy) |
| ) | End of group |
| \s | Matches any whitespace character (space, tab, newline) |
| * | Matches the preceding element zero or more times (greedy) |
| = | Matches the literal character '=' |
| \s | Matches any whitespace character (space, tab, newline) |
| * | Matches the preceding element zero or more times (greedy) |
| (?: | Start of non-capturing group |
| " | Matches the literal character '"' |
| ( | Start of capturing group |
| [^"] | Negated character class — matches any character NOT in " |
| * | Matches the preceding element zero or more times (greedy) |
| ) | End of group |
| " | Matches the literal character '"' |
| | | Alternation — matches the expression before OR after the pipe |
| ' | Matches the literal character ''' |
| ( | Start of capturing group |
| [^'] | Negated character class — matches any character NOT in ' |
| * | Matches the preceding element zero or more times (greedy) |
| ) | End of group |
| ' | Matches the literal character ''' |
| | | Alternation — matches the expression before OR after the pipe |
| ( | Start of capturing group |
| [^\s>] | Negated character class — matches any character NOT in \s> |
| + | Matches the preceding element one or more times (greedy) |
| ) | End of group |
| ) | End of group |
Detailed Explanation
This regex matches HTML attributes in the form name="value", name='value', or name=value. Here is the token-by-token breakdown:
([a-zA-Z][a-zA-Z0-9-]*) — Capturing group 1 matches the attribute name. It must start with a letter followed by zero or more letters, digits, or hyphens. This covers standard attributes like class, id, data-value, and aria-label.
\s*=\s* — Matches the equals sign with optional whitespace on either side. HTML allows spaces around the equals sign in attributes.
(?: — Opens a non-capturing group for the three value alternatives.
"([^"])" — First alternative: matches a double-quoted value. Capturing group 2 captures everything between the quotes. [^"] matches zero or more characters that are not double quotes.
| — Alternation operator separating the alternatives.
'([^']*)' — Second alternative: matches a single-quoted value. Capturing group 3 captures the content between single quotes.
| — Another alternation.
([^\s>]+) — Third alternative: matches an unquoted value. Capturing group 4 captures one or more characters that are neither whitespace nor a closing angle bracket.
) — Closes the non-capturing group.
The g flag enables global matching to find all attributes. This pattern is useful for HTML parsing, attribute extraction, and template processing. It handles the three standard quoting styles defined in the HTML specification.
Example Test Strings
| Input | Expected |
|---|---|
| class="main" | Match |
| data-id='123' | Match |
| disabled | No Match |
| href=https://example.com | Match |
| style = "color: red" | Match |
Try It — Interactive Tester
Match Highlighting(4 matches)
Matches & Capture Groups
63 charsFlags: gMatches: 4Ctrl+Shift+C to copy regex