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.
url-slug
- Less than 1kB minified and gzipped;
- RFC 3986 compliant, compatible with URL hosts, paths, queries and fragments;
- Supports custom dictionaries to replace characters;
- Easily revert slugs with useful options.
Install
$ npm install url-slug
Usage
import urlSlug from 'url-slug'
urlSlug('Sir James Paul McCartney MBE is an English singer-songwriter')
Documentation
urlSlug(string[, options]), convert(string[, options])
Returns string
value converted to a slug.
string
A sentence 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 (false to keep the string unchanged) | LOWERCASE_TRANSFORMER |
Examples
import * as urlSlug from 'url-slug'
urlSlug.convert('Comfortably Numb', {
transformer: urlSlug.UPPERCASE_TRANSFORMER
})
urlSlug.convert('á é í ó ú Á É Í Ó Ú ç Ç ª º ¹ ² ½ ¼', {
separator: '_',
transformer: false
})
urlSlug.convert('Red, red wine, stay close to me…', {
separator: '',
transformer: urlSlug.TITLECASE_TRANSFORMER
})
urlSlug.convert('Schwarzweiß', {
dictionary: { 'ß': 'ss', 'z': 'z ' }
})
revert(slug[, options])
Returns the slug
value converted to a regular sentence.
slug
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 accounts to automatic splitting) | null |
transformer | A built-in transformer or a custom function (false to keep the string unchanged) | false |
Examples
import { revert, TITLECASE_TRANSFORMER } from 'url-slug'
revert('Replace-every_separator.allowed~andSplitCamelCaseToo', {
camelCase: true
})
revert('this-slug-needs-a-title_case', {
separator: '-',
transformer: TITLECASE_TRANSFORMER
})
Custom transformers
Custom transformers are expressed by a function that receives two arguments, fragments
, an array with matching words from a sentence or a slug, and separator
, which will be the separator string set in convert()
options. When revert()
calls the 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()
})
revert('WEIrd_SNAke_CAse', {
separator: '_',
transformer: (fragments, separator) => fragments.map(fragment => (
fragment.slice(0, -2).toLowerCase() + fragment.slice(-2).toUpperCase()
)).join(separator)
})
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
Accepted separator characters
Any character defined as unreserved or sub-delims in RFC 3986, or an empty string, can be used as separator
. 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
, otherwise it will return an untouched string. The following characters are valid:
-
, .
, _
, ~
, ^
, -
, .
, _
, ~
, !
, $
, &
, '
, (
, )
, *
, +
, ,
, ;
or =
dictionary
option considerations
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',
}
})
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',
'ß': 'ss',
}
})
convert('♥øß', {
dictionary: {
'♥': 'love',
'ø': ' o ',
'ß': 'ss',
}
})
convert('♥øß', {
dictionary: {
'♥': 'love',
'ø': 'o ',
'ß': 'ss',
}
})
License
The MIT License