url-slug

What is url-slug?

The url-slug npm package is a utility for converting strings into URL-friendly slugs. It provides a simple and efficient way to generate slugs from text, which can be useful for creating SEO-friendly URLs, filenames, and more.

What are url-slug's main functionalities?

Basic Slug Generation

This feature allows you to convert a string into a URL-friendly slug. Special characters are removed, and spaces are replaced with hyphens.

const urlSlug = require('url-slug');
const slug = urlSlug('Hello World!');
console.log(slug); // Output: 'hello-world'

Custom Separator

You can customize the separator used in the slug. In this example, an underscore is used instead of the default hyphen.

const urlSlug = require('url-slug');
const slug = urlSlug('Hello World!', { separator: '_' });
console.log(slug); // Output: 'hello_world'

Transform Function

This feature allows you to apply a custom transformation function to the string before generating the slug. The example uses a built-in transformer to convert the string to lowercase.

const urlSlug = require('url-slug');
const slug = urlSlug('Hello World!', { transformer: urlSlug.LOWERCASE_TRANSFORMER });
console.log(slug); // Output: 'hello-world'

Custom Transform Function

You can define your own transformation function to customize how the string is processed before generating the slug. In this example, the string is converted to uppercase.

const urlSlug = require('url-slug');
const customTransformer = (str) => str.toUpperCase();
const slug = urlSlug('Hello World!', { transformer: customTransformer });
console.log(slug); // Output: 'HELLO-WORLD'

Other packages similar to url-slug

slugify

The slugify package is another popular utility for generating URL-friendly slugs. It offers similar functionality to url-slug, including custom separators and transformation options. However, slugify is more widely used and has more contributors, which may result in better support and more frequent updates.

speakingurl

The speakingurl package provides advanced options for generating slugs, including transliteration of non-Latin characters and support for multiple languages. It offers more customization options compared to url-slug, making it a good choice for internationalization.

limax

The limax package is designed for generating slugs with a focus on transliteration and Unicode support. It is similar to url-slug but offers more robust handling of non-ASCII characters, making it suitable for applications that require support for multiple languages and character sets.

README

url-slug

• Less than 1kB minified and gzipped;
• Uses default JavaScript APIs, no dependencies;
• SEO friendly;
• RFC 3986 compliant, compatible with URL hosts, paths, queries and fragments;
• Supports custom dictionaries to replace characters;
• Easily revert slugs.

Installation

npm install url-slug

Usage

import urlSlug from 'url-slug'

urlSlug('Sir James Paul McCartney MBE is an English singer-songwriter')
// sir-james-paul-mc-cartney-mbe-is-an-english-singer-songwriter

Usage with Node.js

⚠️ Only named exports are available in Node.js.

import { convert } from 'url-slug'

urlSlug('Sir James Paul McCartney MBE is an English singer-songwriter')
// sir-james-paul-mc-cartney-mbe-is-an-english-singer-songwriter

const { convert } = require('url-slug')

urlSlug('Sir James Paul McCartney MBE is an English singer-songwriter')
// sir-james-paul-mc-cartney-mbe-is-an-english-singer-songwriter

urlSlug(value[, options]), convert(value[, options])

Returns value value converted to a slug.

value

A string to be slugified.

options

Name	Description	Default
camelCase	Split on camel case occurrences	true
dictionary	Chars to be replaced	{}
separator	Character or string used to separate the slug fragments	'-'
transformer	A built-in transformer or a custom function (null to keep the string unchanged)	LOWERCASE_TRANSFORMER

Examples

import * as urlSlug from 'url-slug'

urlSlug.convert('Comfortably Numb', {
  transformer: urlSlug.UPPERCASE_TRANSFORMER,
})
// COMFORTABLY-NUMB

urlSlug.convert('á é í ó ú Á É Í Ó Ú ç Ç ª º ¹ ² ½ ¼', {
  separator: '_',
  transformer: false,
})
// a_e_i_o_u_A_E_I_O_U_c_C_a_o_1_2_1_2_1_4

urlSlug.convert('Red, red wine, stay close to me…', {
  separator: '',
  transformer: urlSlug.TITLECASE_TRANSFORMER,
})
// RedRedWineStayCloseToMe

urlSlug.convert('Schwarzweiß', {
  dictionary: { ß: 'ss', z: 'z ' },
})
// schwarz-weiss

revert(value[, options])

Returns the value value converted to a regular sentence.

value

A slug to be reverted to a sentence.

options

Name	Description	Default
camelCase	Split on camel case occurrences	false
separator	Character or string to split the slug (null for automatic splitting)	null
transformer	A built-in transformer or a custom function (null to keep the string unchanged)	false

Examples

import { revert, TITLECASE_TRANSFORMER } from 'url-slug'

revert('Replace-every_separator.allowed~andSplitCamelCaseToo', {
  camelCase: true,
})
// Replace every separator allowed and Split Camel Case Too

revert('this-slug-needs-a-title_case', {
  separator: '-',
  transformer: TITLECASE_TRANSFORMER,
})
// This Slug Needs A Title_case

Custom transformers

Custom transformers are expressed by a function that receives two arguments: fragments, an array containing the words of a sentence or a slug, and separator, which is the separator string set in convert() options. When revert() calls a transformer, the separator argument will always be a space character (' ') — the separator option will be used to split the slug. Transformers should always return a string.

Examples

import { convert, revert } from 'url-slug'

convert('O’Neill is an American surfboard, surfwear and equipment brand', {
  transformer: (fragments) => fragments.join('x').toUpperCase(),
})
// OxNEILLxISxANxAMERICANxSURFBOARDxSURFWEARxANDxEQUIPMENTxBRAND

revert('WEIrd_SNAke_CAse', {
  separator: '_',
  transformer: (fragments, separator) =>
    fragments
      .map(
        (fragment) =>
          fragment.slice(0, -2).toLowerCase() + fragment.slice(-2).toUpperCase()
      )
      .join(separator),
})
// weiRD snaKE caSE

Built-in transformers

LOWERCASE_TRANSFORMER

Converts the result to lowercase. E.g.: // SOME WORDS >> some words

SENTENCECASE_TRANSFORMER

Converts the result to sentence case. E.g.: // sOME WORDS >> Some words

UPPERCASE_TRANSFORMER

Converts the result to uppercase. E.g.: // some words >> SOME WORDS

TITLECASE_TRANSFORMER

Converts the result to title case. E.g.: // sOME wORDS >> Some Words

Separator characters

Any character or an empty string can be used in the separator property. When the separator is an empty string, the revert() method will split the slug only on camel case occurrences if camelCase option is set to true, or else it returns an untouched string. The following characters are valid according to RFC 3986 — defined as unreserved or sub-delims —, and will be used in revert() function if automatic splitting is enabled — separator is set to null:

-, ., _, ~, ^, -, ., _, ~, !, $, &, ', (, ), *, +, ,, ; or =

dictionary option

It must be an object, with keys set as single characters and values as strings of any length:

import { convert } from 'url-slug'

convert('♥øß', {
  dictionary: {
    '♥': 'love',
    ø: 'o',
    ß: 'ss',
    //...
  },
})
// loveoss

To add separators before or after a specific character, add a space before or after the dictionary definition:

import { convert } from 'url-slug'

convert('♥øß', {
  dictionary: {
    '♥': 'love',
    ø: ' o', // A space was added before
    ß: 'ss',
    //...
  },
})
// love-oss

convert('♥øß', {
  dictionary: {
    '♥': 'love',
    ø: ' o ', // A space was added before and after
    ß: 'ss',
    //...
  },
})
// love-o-ss

convert('♥øß', {
  dictionary: {
    '♥': 'love',
    ø: 'o ', // A space was added after
    ß: 'ss',
    //...
  },
})
// loveo-ss

Compatibility

Compatible with any environment with ES6 support.

License

The MIT License