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:
For example, consider the following URL https://byby.dev/my-awesome-blog-post
. In this URL, my-awesome-blog-post
is the slug that identifies the specific blog post.
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"
There are several libraries available in JavaScript that can be used to slugify a string easily without having to write custom code.
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
var slugify = require('slugify')
slugify('some string') // some-string
// if you prefer something other than '-' as separator
slugify('some string', '_') // some_string
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