/

How to Slugify a String in JavaScript

How to Slugify a String in JavaScript

In this blog post, I will guide you on how to slugify a string in JavaScript. Slugification is the process of transforming a string into a URL-friendly format, typically used for creating clean and readable URLs.

To accomplish this, I will provide you with a snippet of code that can be used to slugify a string:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export function slugify(str) {
  // Remove leading and trailing whitespace
  str = str.trim();

  // Make the string lowercase
  str = str.toLowerCase();

  // Remove accents, swap ñ for n, etc
  str = str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');

  // Remove invalid characters
  str = str.replace(/[^a-z0-9 -]/g, '');

  // Replace whitespace with a hyphen
  str = str.replace(/\s+/g, '-');

  // Collapse consecutive hyphens
  str = str.replace(/-+/g, '-');

  return str;
}

Let’s break down the code:

  1. The trim() function is used to remove leading and trailing whitespace from the input string.

  2. The toLowerCase() function is used to convert the string to lowercase. This ensures consistent slugification results.

  3. The normalize() function is called with the argument 'NFD' to decompose any accented characters into their base form. The replace() function is then used to remove the diacritical marks.

  4. The replace() function with the regular expression /[^a-z0-9 -]/g is used to remove any invalid characters from the string. Only lowercase letters, numbers, spaces, and hyphens are allowed.

  5. The replace() function with the regular expression /\s+/g is used to replace any consecutive whitespace characters with a single hyphen.

  6. The final replace() function with the regular expression /-+/g is used to collapse consecutive hyphens into a single hyphen.

  7. The slugified string is returned as the result of the function.

To use this code snippet, simply call the slugify() function and pass the desired string as an argument. The function will return the slugified version of the string.

Example usage:

1
2
const slug = slugify('Hello World! This is an Example String.');
console.log(slug); // Output: hello-world-this-is-an-example-string

And that’s it! You now have a handy code snippet to slugify strings in JavaScript.

tags: [“javascript”, “slugify”, “string manipulation”]