Regex to Match kebab-case Strings
Validate kebab-case strings using lowercase letters, digits, and hyphens. No leading or trailing hyphens or consecutive hyphens allowed. Free regex tester.
Regular Expression
/^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/
Token Breakdown
| Token | Description |
|---|---|
| ^ | Anchors at the start of the string (or line in multiline mode) |
| [a-z] | Character class — matches any one of: a-z |
| [a-z0-9] | Character class — matches any one of: a-z0-9 |
| * | Matches the preceding element zero or more times (greedy) |
| (?: | Start of non-capturing group |
| - | Matches the literal character '-' |
| [a-z0-9] | Character class — matches any one of: a-z0-9 |
| + | Matches the preceding element one or more times (greedy) |
| ) | End of group |
| * | Matches the preceding element zero or more times (greedy) |
| $ | Anchors at the end of the string (or line in multiline mode) |
Detailed Explanation
This regex validates strings written in kebab-case notation, commonly used in URLs, CSS class names, and HTML attributes. Here is the token-by-token breakdown:
^ — Anchors the match at the start of the string.
[a-z] — Matches a single lowercase letter as the first character. Kebab case strings should begin with a letter.
[a-z0-9]* — Matches zero or more lowercase letters or digits for the remainder of the first word.
(?:-[a-z0-9]+)* — A non-capturing group that matches zero or more hyphen-separated word segments. Each segment starts with a single hyphen followed by one or more lowercase letters or digits. This prevents consecutive hyphens (like my--class), leading hyphens, and trailing hyphens.
$ — Anchors the match at the end of the string.
No flags are used since lowercase enforcement is intentional for kebab-case validation.
Kebab case gets its name from the visual resemblance to words skewered on a kebab stick. It is the standard naming convention for CSS classes and IDs (like nav-bar, btn-primary), URL path segments (like /user-profile/edit-settings), HTML custom data attributes, and component file names in frameworks like Angular and Vue.
Examples of valid kebab-case strings include: my-component, user-profile-page, btn-lg, and text-center-sm. This pattern is structurally identical to the slug-url pattern since URL slugs follow kebab-case conventions.
This pattern is useful for CSS class name validation, URL slug generation, and enforcing naming conventions in frontend codebases.
Example Test Strings
| Input | Expected |
|---|---|
| kebab-case | Match |
| my-component-name | Match |
| camelCase | No Match |
| -leading-hyphen | No Match |
| has--double | No Match |
| simple | Match |
Try It — Interactive Tester
31 charsFlags: noneMatches: 0Ctrl+Shift+C to copy regex