Javascript – Slug

A slug is a way to represent a title with a limited charset (only lowercase letter and dash) to be inserted in the url. Even if it is a common function there is no good enough implentation when you Google for it.

Here are the features I needed:

  • No multiple dashes. ---- is converted to -
  • No wrapping dashes. -title- is converted to title
  • Basic support for internationalization. Coût d'éclat is converted to cout-d-eclat Don’t look at the spelling mistake!
  • Basic support for common signs. 13$ & 12€ is converted to 13-dollar-and-12-euro

Demo

You can try the demo and see if it fits your needs.
var keys = keys || function (o) { var a = []; for (var k in o) a.push(k); return a; };
slug = function (string) {
// var accents = “àáäâèéëêìíïîòóöôùúüûñç”;
var accents = “u00e0u00e1u00e4u00e2u00e8”
+ “u00e9u00ebu00eau00ecu00edu00ef”
+ “u00eeu00f2u00f3u00f6u00f4u00f9”
+ “u00fau00fcu00fbu00f1u00e7”;
var without = “aaaaeeeeiiiioooouuuunc”;
var map = {‘@’: ‘ at ‘, ‘u20ac’: ‘ euro ‘,
‘$’: ‘ dollar ‘, ‘u00a5’: ‘ yen ‘,
‘u0026’: ‘ and ‘, ‘u00e6’: ‘ae’, ‘u0153’: ‘oe’};
return string
// Handle uppercase characters
.toLowerCase()
// Handle accentuated characters
.replace(
new RegExp(‘[‘ + accents + ‘]’, ‘g’),
function (c) { return without.charAt(accents.indexOf(c)); })
// Handle special characters
.replace(
new RegExp(‘[‘ + keys(map).join(”) + ‘]’, ‘g’),
function (c) { return map[c]; })
// Dash special characters
.replace(/[^a-z0-9]/g, ‘-‘)
// Compress multiple dash
.replace(/-+/g, ‘-‘)
// Trim dashes
.replace(/^-|-$/g, ”);
};

Code

var keys = keys || function (o) { var a = []; for (var k in o) a.push(k); return a; };
 
var slug = function (string) {
//  var accents = "àáäâèéëêìíïîòóöôùúüûñç";
  var accents = "u00e0u00e1u00e4u00e2u00e8"
    + "u00e9u00ebu00eau00ecu00edu00ef"
    + "u00eeu00f2u00f3u00f6u00f4u00f9"
    + "u00fau00fcu00fbu00f1u00e7";
 
  var without = "aaaaeeeeiiiioooouuuunc";
 
  var map = {'@': ' at ', 'u20ac': ' euro ', 
    '$': ' dollar ', 'u00a5': ' yen ',
    'u0026': ' and ', 'u00e6': 'ae', 'u0153': 'oe'};
 
  return string
    // Handle uppercase characters
    .toLowerCase()
 
    // Handle accentuated characters
    .replace(
      new RegExp('[' + accents + ']', 'g'),
      function (c) { return without.charAt(accents.indexOf(c)); })
 
    // Handle special characters
    .replace(
      new RegExp('[' + keys(map).join('') + ']', 'g'),
      function (c) { return map[c]; })
 
    // Dash special characters
    .replace(/[^a-z0-9]/g, '-')
 
    // Compress multiple dash
    .replace(/-+/g, '-')
 
    // Trim dashes
    .replace(/^-|-$/g, '');
};

var slug = function (string) {
// var accents = "àáäâèéëêìíïîòóöôùúüûñç";
var accents = "u00e0u00e1u00e4u00e2u00e8"
+ "u00e9u00ebu00eau00ecu00edu00ef"
+ "u00eeu00f2u00f3u00f6u00f4u00f9"
+ "u00fau00fcu00fbu00f1u00e7";

var without = "aaaaeeeeiiiioooouuuunc";

var map = {‘@’: ‘ at ‘, ‘u20ac’: ‘ euro ‘,
‘$’: ‘ dollar ‘, ‘u00a5’: ‘ yen ‘,
‘u0026’: ‘ and ‘, ‘u00e6’: ‘ae’, ‘u0153’: ‘oe’};

return string
// Handle uppercase characters
.toLowerCase()

// Handle accentuated characters
.replace(
new RegExp(‘[‘ + accents + ‘]’, ‘g’),
function (c) { return without.charAt(accents.indexOf(c)); })

// Handle special characters
.replace(
new RegExp(‘[‘ + keys(map).join(”) + ‘]’, ‘g’),
function (c) { return map[c]; })

// Dash special characters
.replace(/[^a-z0-9]/g, ‘-‘)

// Compress multiple dash
.replace(/-+/g, ‘-‘)

// Trim dashes
.replace(/^-|-$/g, ”);
};

Bonus

If you are bored, here is a little exercise for you. Can you find a and b such as

a >= b && a < = b
// true
 
a == b
// false

a == b
// false

If you liked this article, you might be interested in my X feed as well.