Converting A Title To A URL Slug Using jQuery Slugify Plugin
File Size: | 106 KB |
---|---|
Views Total: | 4579 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.