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';

        .filter('slugify', Filter);

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

            // 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