Converting A Title To A URL Slug Using jQuery Slugify Plugin

File Size: 106 KB
Views Total: 4669
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></script>
<script src="dist/slugify.js"></script>

4. Initialize the plugin and you're done.

jQuery(function($) {

5. Default plugin settings.

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

Change logs:


  • v1.2.5: empty targets cannot be locked


  • v1.2.3


  • v1.2.1


  • Support the HTML lang attribute


  • Switch to speakingurl


  • Cleaner slugs


  • 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.