snippetjavascriptTip
Convert a string to a SEO-friendly slug with JavaScript
Viewed 0 times
javascriptslugseofriendlywithconvertstring
Problem
SEO is important, and one of the things that can help improve your website's SEO is having a URL that is easy to read and understand. This is where slugs come in.
A slug is a URL-friendly version of a string, typically used to identify a resource on a website. Conventionally, slugs are created by converting a string to lowercase, removing special characters and replacing spaces with dashes.
@You might also like
The first part is straightforward, using
After that, you can replace word separators, such as spaces (
A slug is a URL-friendly version of a string, typically used to identify a resource on a website. Conventionally, slugs are created by converting a string to lowercase, removing special characters and replacing spaces with dashes.
@You might also like
The first part is straightforward, using
String.prototype.toLowerCase() and String.prototype.trim() to lowercase and tidy up the string. Then, you can use a regular expression to find any characters that are not alphanumeric (\w), spaces (\s) or dashes (-) and remove them, using String.prototype.replace().After that, you can replace word separators, such as spaces (
\s) and underscores (_) and dashes (-), with a single dash (-), using String.prototype.replace() again.Solution
const slugify = str =>
str
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, '')
.replace(/[\s_-]+/g, '-')
.replace(/^-+|-+$/g, '');
slugify('Hello World!'); // 'hello-world'@You might also like
The first part is straightforward, using
String.prototype.toLowerCase() and String.prototype.trim() to lowercase and tidy up the string. Then, you can use a regular expression to find any characters that are not alphanumeric (\w), spaces (\s) or dashes (-) and remove them, using String.prototype.replace().After that, you can replace word separators, such as spaces (
\s) and underscores (_) and dashes (-), with a single dash (-), using String.prototype.replace() again.Finally, we can use a regular expression to match one or more consecutive dashes (
-+) at the beginning and end of the string and remove them, using String.prototype.replace() one more time.Code Snippets
const slugify = str =>
str
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, '')
.replace(/[\s_-]+/g, '-')
.replace(/^-+|-+$/g, '');
slugify('Hello World!'); // 'hello-world'Context
From 30-seconds-of-code: string-to-slug
Revisions (0)
No revisions yet.