Converting A Title To A URL Slug Using jQuery Slugify Plugin

Slugify is a lightweight and easy-to-use jQuery plugin that makes an input field on a form automatically generate the URL Slug when your user types.

How to use it:

1. Create a URL Slug source input filed where the text will be slugged.

<input type ="text" value="" id="slug-source"/>

2. Create a URL Slug target element where the Url Slug will be generated.

<span id="slug-target"></span>

3. Include jQuery library and jQuery slugify at the bottom of your page to reduce the page load time.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dist/slugify.js"></script>

4. Initialize the plugin and you're done.

jQuery(function($) {
  $('#slug-target-span').slugify('#slug-source');
});

5. Default plugin settings.

preSlug: null,
postSlug: null,
slugFunc: function(input, opts) {
  return window.getSlug(input, opts);
}

Change logs:

2017-10-07

• v1.2.5: empty targets cannot be locked

2015-12-23

• v1.2.3

2015-08-02

• v1.2.1

2015-04-19

• Support the HTML lang attribute

2015-04-06

• Switch to speakingurl

2014-12-30

• Cleaner slugs

2014-12-30

• Added some more chars

v1.0.3 (2013-11-26)

• Added preSlug and postSlug as optional formatter functions

---

This awesome jQuery plugin is developed by madflow. For more Advanced Usages, please check the demo page or visit the official website.