Converting a string to slug with JavaScript

090503

Recently I've been working on implementing slugs in my CMS to be able to generate nicer URLs. In order to do so I've created a little JavaScript function that converts a string to a slug. I'll first give you the code and then explain it a bit. [update: 2.07.10 Fixed IE issue][update: 18.09.10 Minor improvements]

function string_to_slug(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();
  
  // remove accents, swap ñ for n, etc
  var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
  var to   = "aaaaeeeeiiiioooouuuunc------";
  for (var i=0, l=from.length ; i<l ; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-'); // collapse dashes

  return str;
}

Here's a step by step description:

• The first thing we do is trim the string, that is, remove any whitespace at the beginning and end. The regular expression /^\s+|\s+$/g does exactly that:
  • / marks the start of the regular expression
  • ^\s+ means "one or more white-space caracteres at the beginning of the string"
  • | means "or"
  • \s+$ means "one or more white-space caracteres at the end of the string"
  • /g ends the regular expression, and sets the global flag (otherwise only one substitution would be performed)
• Next, we convert the string to lower case

• We are going to remove any invalid characters, but first we'll replace any 'special' letters for their 'plain' versions. For example in Spanish we have á, é and so on, and even though these are not valid characters in a slug, we don't want to simply remove them, so instead we replace them for a, e, etc. The JavaScript has nothing fancy here.

  Note that I also choose to replace ·/_,:; for dashes (the first dot is the middle dot, used for example in Catalan), I think this will generate better slugs than if we simply remove this characters.

  You might need/want to adjust this part of the function to suit your needs (your language might have other symbols that I haven't included here).

• Now we're ready to remove any remaining invalid characters. The regular expression /[^a-z0-9 -]/g will match any character that is not a lowercase letter, a digit, a space or a dash. I won't explain this regexp in detail, this post is getting way too long! :) Do a search for "character classes", there's plenty of info around.

  Note that we include spaces as a valid character. Don't worry, we'll get rid of them in the next step. We can't just remove them from the string, because we want to replace them by dashes.

• Now it's time to replace any spaces with dashes. But we'll collapse any whitespace as well, so multiple spaces will be converted to a single dash. The expression /\s+/g should be easy if you understood the one about trimming the string.
• Almost there! The expression /-+/g matches any series of consecutive dashes (which may occur as a result of the previous substitutions), so we replace that for a single dash. Job done!

There's room for improvement. For instance, we could replace the & sign for "and", but that brings problem with multilanguage sites. One could detect the language being used and replace by the appropriate word, but it seems a bit overkill to me... As it is, this should generate nice slugs in most cases.

Posted in: English, Web, JavaScript
Tags: regular expressions