1. url-slug
Slug generator with less than 1 KB and no dependencies, RFC 3986 compliant
url-slug
Package: url-slug
Created by: stldo
Last modified: Sun, 18 Jun 2023 04:35:09 GMT
Version: 4.0.1
License: MIT
Downloads: 1,048,648
Repository: https://github.com/stldo/url-slug

Install

npm install url-slug
yarn add url-slug

url-slug Build status npm npm minzipped size

  • 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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin