Convert Title to URL Slug with jQuery Slugify JS

The Slugify is a general purpose URL slug creation plugin for jQuery. It encodes all special characters into (a valid ASCII format) SEO friendly slug. The plugin can be used as a tinny tool to convert title to URL slug or programmatically in jQuery / JavaScript programs.

Furthermore, the plugin allows you to replace whitespace character with your custom chracter (i,e dash – or plus + etc).

Plugin Overview

Plugin: Slugify JS
Author: madflow
Licence: MIT Licence
Published: September 23, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 8.36 KB

How to Use Slugify to Convert Title to Slug

1. After downloading this slug creation project, load jQuery and Slugify plugin’s JavaScript file into your webpage.

<!-- jQuery -->
<script src=""></script>

<!-- Slugify JS -->
<script src="js/slugify.js"></script>

2. Now, create a form in HTML with input elements for title and slug with unique ids. You can generate URL slug from any text, earthier it is from input or value of a variable. The following is the basic HTML structure for slugify,

   <fieldset class="slugify">
      <legend> Slugify JS</legend>
      <label for="slug-source">Input Title: </label>
      <input type ="text" value="" id="slug-source"/>
      <label for="slug-target">URL Slug: </label>
      <input type ="text" value="" id="slug-target"/>
         <span class="slug-ouput">Generated URL Slug</span>: <span id="slug-target-span"></span> 

3. Finally initialize the plugin in jQuery document ready function to active the convert title to slug jQuery plugin.




4. If you want to style the slugify form, use the following CSS code.

fieldset.slugify {
	color: #515151;
	border: 1px solid #ccc;
	padding: 15px;

.slugify legend {
	font-size: 16px;
	font-weight: 600;
	padding: 0 10px;

.slugify input {
	display: block;
	padding: 8px;
	margin: 8px;

.slug-ouput {
	color: #05ab13;
	font-size: 20px;
	font-weight: 500;

5. To use the custom character for whitespace option.

$('#slug-target,#slug-target-span').slugify('#slug-source', {
    whitespace: '+',

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.