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: '+',
});
Similar Code Snippets:
jQuery Highlight Text in div with Marker Animation
iOS Style Toggle Buttons Using CSS
jQuery Multiple Image Upload with Preview and Delete
Read Text File And Display in HTML Using JavaScript
Flight Reservation Form HTML Code
Display Form Fields Based on Selection using jQuery - conditionize
3 Option Toggle Switch In HTML CSS
Drag and Drop Form Builder using Bootstrap 4 and jQuery
JavaScript Tags Input with Comma Separated
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.