JavaScript Regular Expressions
JavaScript Regex in Practice
A few everyday patterns cover most of what regular expressions are used for.
In real work the same handful of patterns come up again and again.
It is also worth knowing when not to reach for one.
Example
Example
javascript
const messy = " too many spaces ";
console.log(messy.trim().replace(/\s+/g, " "));The output has single spaces throughout.
Common Jobs
Collapsing whitespace.
Pulling numbers out of text.
Turning a title into a URL slug.
Syntax
Syntax
javascript
text.replace(/\s+/g, " ");\s+ matches any run of whitespace.
Collapsing Whitespace
\s+ handles spaces, tabs and newlines together.
Example
Example
javascript
const messy = "a b\t\tc";
console.log(messy.replace(/\s+/g, " "));Plain replaceAll(" ", " ") could not do this.
Extracting Numbers
Pull every number out of a sentence.
Example
Example
javascript
const text = "3 apples and 12 pears";
const numbers = text.match(/\d+/g).map(Number);
console.log(numbers.join(","));
console.log(numbers.reduce(function (a, b) { return a + b; }, 0));Converting with Number makes them usable.
Making a Slug
Lowercase, strip anything unusual, then join with dashes.
Example
Example
javascript
function slug(title) {
return title
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/^-|-$/g, "");
}
console.log(slug("Hello, World! 2026"));The output is hello-world-2026.
Escaping User Input
Text from a visitor may contain regex characters.
Escape it before building a pattern from it.
Example
Example
javascript
function escape(text) {
return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
const pattern = new RegExp(escape("a.b"));
console.log(pattern.test("a.b"));
console.log(pattern.test("axb"));Without escaping, the dot would have matched any character.
When Not to Use One
For exact text, the string methods are clearer and faster.
For HTML or JSON, use a real parser.
Example
Example
javascript
const text = "report.pdf";
console.log(text.endsWith(".pdf"));
console.log(/\.pdf$/.test(text));Both work, but the first says what it means at a glance.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Regex in Practice</title>
</head>
<body>
<h1>Regex in Practice</h1>
<p id="out"></p>
<script>
function slug(title) {
return title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
}
const messy = " too many spaces ";
const text = "3 apples and 12 pears";
document.getElementById("out").innerHTML =
"Tidied: [" + messy.trim().replace(/\s+/g, " ") + "]" +
"<br>Numbers: " + text.match(/\d+/g).join(", ") +
"<br>Slug: " + slug("Hello, World! 2026");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try your own title:
Put punctuation and capitals in and see the slug that comes out.
Important Points
\s+collapses any run of whitespace.\d+withgextracts every number.- Slugs are two replaces: strip, then trim the dashes.
- Escape user input before building a pattern.
- Use string methods for exact text and a parser for structured data.
Conclusion
A small set of patterns covers most day-to-day needs.
Escaping user input matters as soon as a pattern is built dynamically.
Knowing when not to use a regular expression is as useful as knowing how.