How to slugify a string in JavaScript?

Definition

This page explains how to convert a string to slug in JavaScript. Slugifying is the action of converting a string into a valid URL (a slug). For example : le blog de Lulu will become le-blog-de-lulu.

JavaScript source code

The following function converts a string into a slug:

// Slugify a string
function slugify(str)
{
    str = str.replace(/^\s+|\s+$/g, '');

    // Make the string lowercase
    str = str.toLowerCase();

    // Remove accents, swap ñ for n, etc
    var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
    var to   = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

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

    return str;
}

See also

• Add icons on your web pages
• 3D image carousel in pure JavaScript and CSS
• Draw a circle in a square in pure CSS with ::before
• CSS color table
• CSS styles for Rainbow code highlighter
• How to detect ad blockers on web sites?
• HTML drop-down list of citizenships.
• HTML five stars ranking
• How Bézier curves are described in SVG paths
• How to check if a number is prime in JavaScript
• How to get list of subdirectories in PHP
• How to automatically scroll to the bottom of the page in Google Chrome
• How to send dynamic data using Ajax?
• How to slugify a string in PHP?
• How to sort a multidimensional array in PHP?
• In PHP, how to convert a date in French?
• Levenshtein distance in mySQL
• List of supported languages by Prism syntax highlighter
• Nice HTML checkbox
• PHP array of countries and citizenships.
• Pure CSS loader
• Replace HTML checkbox with images
• Simple SSE in PHP
• Sessions or cookies?

---