HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptTip

Convert a string to a SEO-friendly slug with JavaScript

Submitted by: @import:30-seconds-of-code··
0
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 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.