Skip to main content

JavaScript RegExp URL slug validation

Summary

JavaScript RegExp examples to validate URI paths, also known as URL slugs. Code examples to match lowercase characters, hyphens and numbers.

Matching #

Regular expressions (RegEx) are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. The RegExp object is used for matching text with a pattern.

Lowercase characters #

The following pattern matches a URL slug string with all lowercase a-z characters:

[a-z]+

This would match the following strings:

foo
bar

Uppercase characters #

The following pattern matches a URL slug string that also containins uppercase (A-Z) characters:

[a-zA-Z]+

This would match the following strings:

foo
Foo
bar
Bar

rfc3986 says: Although schemes are case-insensitive, the canonical form is lowercase and documents that specify schemes must do so with lowercase letters. An implementation should accept uppercase letters as equivalent to lowercase in scheme names (e.g., allow "HTTP" as well as "http") for the sake of robustness but should only produce lowercase scheme names for consistency.

Hyphens and underscores #

The following pattern matches a URL slug string that also containins hyphens (-) and underscores (_):

[a-zA-Z\-\_]+

This would match the following strings:

foo-Foo
bar_Bar

Numbers #

The following pattern matches a URL slug string that also containing numbers (0-9):

[a-zA-Z\-\_0-9]+

This would match the following strings:

foo-Foo-1
bar_Bar_2

Reserved characters #

The following pattern matches a URL slug string that also containing reserved characters /&?=:%:

[a-zA-Z-_/&?=:%0-9]+

This would match the following strings:

http://foo/bar/baz_123:80?var=qux&quux
https://Foo/bar_baz-123:80?var=qux&quux%100

More unreserved characters #

URIs consist of even more unreserved characters, which we will add now.

The following pattern matches a URL slug string that also containing characters like #.+~:

[a-zA-Z-_#.+~/&?=:%0-9]+

This would match the following strings:

http://foo/bar/baz_123:80/index.php?var=qux&quux#item
https://Foo/bar_baz-123/default.html?var=qux&quux%100

RegExp Validation #

Feel free to adjust the patterns to your needs. Like this, you can already be sure not to match any illegal characters.

Do not forget to always validate your patterns with validation and testing tools. This makes your RegExp robust.


Further readings #

Sources and recommended, further resources on the topic:

Author

Jonas Jared Jacek • J15k

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

License

License: JavaScript RegExp URL slug validation by Jonas Jared Jacek is licensed under CC BY-SA 4.0.

This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/instructions/regex-url-slug-validation">JavaScript RegExp URL slug validation</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>

For more information see the DITig legal page.


“Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.”

 Antoine de Saint-Exupery, French writer, poet, and journalistWind, Sand and Stars, - IT quotes