Convert Title to URL Slug with jQuery Slugify JS

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

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

Demo Download

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.