How to slugify a string in JavaScript

A slug is a string that is used to uniquely identify a resource in a URL-friendly way. It is typically used in the URL to identify a specific page or post on a website. A slug consists of a set of characters that are easy to read and remember, and that accurately describe the content of the resource.

A common ASCII slug convention uses strings that meet the following criteria:

• It consists of lowercase alphanumeric characters (a-z, 0-9) and hyphens (-).
• It does not contain any spaces, special characters, or accented characters.
• It accurately and concisely describes the content of the resource it identifies.
• It is unique within the context of the website or application.

For example, consider the following URL https://byby.dev/react-data-fetching-libraries. In this URL, react-data-fetching-libraries is the slug that identifies the specific blog post.

A simple slugify

In JavaScript, you can slugify a string by converting it to a URL-friendly format where special characters and spaces are replaced with hyphens or underscores. Here’s a simple ASCII-only function that handles Latin characters with common diacritics:

function slugify(str) {
  return String(str)
    .normalize('NFKD') // split accented characters into their base characters and diacritical marks
    .replace(/[\u0300-\u036f]/g, '') // remove combining diacritical marks
    .trim() // trim leading or trailing whitespace
    .toLowerCase() // convert to lowercase
    .replace(/\s+/g, '-') // replace spaces with hyphens
    .replace(/[^a-z0-9-]/g, '') // remove non-alphanumeric characters
    .replace(/-+/g, '-') // remove consecutive hyphens
    .replace(/^-+|-+$/g, ''); // remove leading and trailing hyphens
}

console.log(slugify("The Quick Brown Fox Jumps Over The Lazy Dog! "))
// "the-quick-brown-fox-jumps-over-the-lazy-dog"

console.log(slugify("söme stüff with áccènts"))
// "some-stuff-with-accents"

This approach is enough for many English and Latin-script titles, but it does not transliterate every writing system. For example, many Cyrillic, Chinese, Japanese, or Arabic characters will be removed by the [^a-z0-9-] step instead of being converted to readable Latin equivalents.

Using a library

There are several libraries available in JavaScript that can be used to slugify a string easily without having to write custom code.

1. Lodash (59.1k ⭐) — This library provides a wide range of utility functions for JavaScript, including a kebabCase function that can be used to convert a string to kebab case, which is similar to slug format. Kebab case format is a naming convention where words are separated by a hyphen (-) and all letters are in lower case.

const _ = require('lodash');

const myString = 'Hello World';
const kebabCaseString = _.kebabCase(myString);

console.log(kebabCaseString); // Output: hello-world

2. Voca (3.6k ⭐) — The Voca library offers helpful functions to make string manipulations comfortable: change case, trim, pad, slugify, latinise, sprintf’y, truncate, escape and much more. In Voca, slugify is a function that converts a string to a URL-friendly slug format.

const { slugify } = require('voca');

const myString = 'Hello World!';
const slugifiedString = slugify(myString);

console.log(slugifiedString); // Output: hello-world

3. @sindresorhus/slugify (2.5k ⭐) — Useful for URLs, filenames, and IDs. It handles most major languages, including German (umlauts), Vietnamese, Arabic, Russian, and more.

import slugify from '@sindresorhus/slugify';

slugify('I ♥ Dogs'); // i-love-dogs
slugify('  Déjà Vu!  '); // deja-vu
slugify('fooBar 123 $#%'); // foo-bar-123
slugify('я люблю единорогов'); // ya-lyublyu-edinorogov

slugify('BAR and baz', {separator: '_'}); // bar_and_baz
slugify('BAR and baz', {separator: ''}); // barandbaz

4. slugify (1.5k ⭐) — This library includes a simple slugify function in vanilla ES2015 JavaScript, has no dependencies, coerces foreign symbols to their English equivalent, works in the browser (window.slugify) and AMD/CommonJS-flavored module loaders.

const slugify = require('slugify');

slugify('Some String!', { lower: true, strict: true }); // some-string

// if you prefer something other than '-' as separator
slugify('Some String!', {
  replacement: '_',
  lower: true,
  strict: true
}); // some_string