Feb
20

Javascript – Slug

vjeux Javascript 2010-02-20

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.

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 = "\u00e0\u00e1\u00e4\u00e2\u00e8"
    + "\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef"
    + "\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9"
    + "\u00fa\u00fc\u00fb\u00f1\u00e7";
 
  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
Address: http://blog.vjeux.com/2010/javascript/javascript-slug.html
«
»

Random Posts

  • Project – Fooo (1 Comment) -- August 4, 2009

    Presentation Fooo is my first year school project written in Delphi. During 8 months, Vladimir Nachbaur, Alban Perillat-Merceroz, Felix Abecassis and I developed a game that mimics Warcraft III and achieved to be major of the promotion. We tried to make no use of copyrighted Warcraft file...

  • Javascript – Ajax Binary Reader (7 Comments) -- January 17, 2010

    With WebGL coming in, it is important to be able to deal with binary data files like the models. Since there is no such thing on the internet right now I decided to make my own. The javascript BinaryReader library tries to mimic the C# BinaryReader. The code is mostly based on the binary-parser c...

  • Javascript – Type Casting (0 Comments) -- September 4, 2009

    Comparison In Javascript there are 3 types we are often comparing: String, Number and Boolean. After digging through the ECMA-262 specifications, here is the behaviour of the == operator (11.9.3) on these types: Number == String Typecasted as follow: Number == Number(String) Number == Boolean ...

  • SmallHash – Information Compression (0 Comments) -- August 7, 2009

    SmallHash encodes any range of integers into the smallest possible string. This way, you can use the hash part of your url with efficiency....

  • Javascript – Dynamic Query Throttling (0 Comments) -- October 30, 2009

    Working on the World of Raids Recruitment Tool we wanted automatic saving while editing. There are basically two ways of handling the problem. Send update everytime something changes. The main advantage of this technique is that you are always up to date. However, it is spamming the server on field...

Trackback

No comments until now

Add your comment now