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: 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

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

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...