Login

jQuery slugify plugin

Author:
girasquid
Posted:
May 5, 2009
Language:
JavaScript
Version:
Not specified
Tags:
slug jquery slugify
Score:
7 (after 7 ratings)

This plugin lets you make a field(ideally for a slug) populate itself based on the value of another field. You use it like this:

jQuery('#id_title').slugify('#id_slug');

1
2
3
4
5
6
7
8
jQuery.fn.slugify = function(obj) {
    jQuery(this).data('obj', jQuery(obj));
    jQuery(this).keyup(function() {
        var obj = jQuery(this).data('obj');
        var slug = jQuery(this).val().replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
        obj.val(slug);
    });
}

More like this

  1. Unique Slugify by SmileyChris 7 years, 4 months ago
  2. slugify js -> python by santuri 8 years, 6 months ago
  3. Automate unique slugs by taojian 7 years, 8 months ago
  4. Automatically slugify slug fields in your models by Aliquip 8 years, 6 months ago
  5. slugify with transliteration by jezdez 4 years, 9 months ago

Comments

gobble (on July 5, 2010):
jQuery.fn.slugify = function(obj) {
    jQuery(this).data('obj', jQuery(obj));
    jQuery(this).keyup(function() {
        var obj = jQuery(this).data('obj');
        var slug = jQuery(this).val().replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
        jQuery(this).data('obj').val(slug);
    });
    jQuery(this).blur(function() {
        var obj = jQuery(this).data('obj');
        var slug = jQuery(this).val().replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
        jQuery(this).data('obj').val(slug);
    });

}

this fixes a blank slug field if you select a entry for your lineedit from your prowsers suggestion dropdown and exit the lineedit with |tab|.

#

pmcelhaney (on May 23, 2011):

Here's a more advanced version. It takes care of a few things like converting & to "and", preventing leading or trailing spaces from becoming hyphens, and barring automatic changes after the slug has been edited manually. It also accepts an optional slugFunc parameter so you can customize how the title is converted to a slug.

https://github.com/pmcelhaney/jQuery-Slugify-Plugin

#

Please login first before commenting.