August 30 2016

AngularJS - Slugify Filter

A custom AngularJS filter for converting a string into a url slug. A slug is a url & seo friendly string containing only lowercase alphanumeric characters and hyphens "-". Slugs are often used for including titles in URLs for SEO.

(function () {
    'use strict';

    angular
        .module('app')
        .filter('slugify', Filter);

    function Filter() {
        return function (input) {
            if (!input)
                return;

            // make lower case and trim
            var slug = input.toLowerCase().trim();

            // replace invalid chars with spaces
            slug = slug.replace(/[^a-z0-9\s-]/g, ' ');

            // replace multiple spaces or hyphens with a single hyphen
            slug = slug.replace(/[\s-]+/g, '-');

            return slug;
        };
    }
})();


Example usage of AngularJS Slugify Filter

<a href="{{post._id}}/{{post.title | slugify}}">{{post.title}}</a>

Sponsored by