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="https://code.jquery.com/jquery-3.4.1.min.js"></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,

<form>
   <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"/>
      <p>
         <span class="slug-ouput">Generated URL Slug</span>: <span id="slug-target-span"></span> 
      </p>
   </fieldset>
</form>

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

$(document).ready(function(){

  $('#slug-target,#slug-target-span').slugify('#slug-source');

});

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: '+',
});