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…


This content originally appeared on DEV Community and was authored by byby

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 string can be qualified as a slug if it meets the following criteria:

  • It consists of lowercase alphanumeric characters (a-z,0-9) and hyphens (-).
  • It does not contain any spaces or other special 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 any special characters and spaces are replaced with hyphens or underscores. Here's an example function that can accomplish this:

function slugify(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim leading/trailing white space
  str = str.toLowerCase(); // convert string to lowercase
  str = str.replace(/[^a-z0-9 -]/g, '') // remove any non-alphanumeric characters
           .replace(/\s+/g, '-') // replace spaces with hyphens
           .replace(/-+/g, '-'); // remove consecutive hyphens
  return str;
}

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

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.

  • lodash (56k ⭐) — 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
  • Voca (3.5k ⭐) — 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
  • @sindresorhus/slugify (2.3k ⭐) — Useful for URLs, filenames, and IDs. It handles most major languages, including German (umlauts), Vietnamese, Arabic, Russian, and more. 
const slugify = require('@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
  • slugify (1.2k ⭐) — 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'); // some-string

// if you prefer something other than '-' as separator
slugify('some string', '_');  // some_string

You might also like


This content originally appeared on DEV Community and was authored by byby


Print Share Comment Cite Upload Translate Updates
APA

byby | Sciencx (2023-04-22T05:47:13+00:00) How to slugify a string in JavaScript. Retrieved from https://www.scien.cx/2023/04/22/how-to-slugify-a-string-in-javascript/

MLA
" » How to slugify a string in JavaScript." byby | Sciencx - Saturday April 22, 2023, https://www.scien.cx/2023/04/22/how-to-slugify-a-string-in-javascript/
HARVARD
byby | Sciencx Saturday April 22, 2023 » How to slugify a string in JavaScript., viewed ,<https://www.scien.cx/2023/04/22/how-to-slugify-a-string-in-javascript/>
VANCOUVER
byby | Sciencx - » How to slugify a string in JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/22/how-to-slugify-a-string-in-javascript/
CHICAGO
" » How to slugify a string in JavaScript." byby | Sciencx - Accessed . https://www.scien.cx/2023/04/22/how-to-slugify-a-string-in-javascript/
IEEE
" » How to slugify a string in JavaScript." byby | Sciencx [Online]. Available: https://www.scien.cx/2023/04/22/how-to-slugify-a-string-in-javascript/. [Accessed: ]
rf:citation
» How to slugify a string in JavaScript | byby | Sciencx | https://www.scien.cx/2023/04/22/how-to-slugify-a-string-in-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts