Minimal URL Slug Creation Plugin With jQuery - Text2Slug

File Size: 42.4 KB
Views Total: 660
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal URL Slug Creation Plugin With jQuery - Text2Slug

Text2Slug is a lightweight yet customizable jQuery plugin which lets you create SEO-friendly URL slugs from post title as you type in an input field. With variable slug colors and custom separator.

How to use it:

1. Add jQuery library and the jQuery text2slug.js to the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="text2slug.min.js"></script>

2. Create a text field to accept the page titles.

<input type="text" name="demo" id="demo">

3. Just call the plugin and you're done.

$(function(){
  $('#demo').text2slug();
});

4. Change the font color of the URL slugs.

$(function(){
  $('#demo').text2slug({
    slug_color: "#4E8451",
  });
});

5. The plugin uses hyphen (dash) as separator in output. You can change it in the JavaScript as follow:

$(function(){
  $('#demo').text2slug({
    separator:'_'
  });
});

6. Change the name of the hidden slug input.

$(function(){
  $('#demo').text2slug({
    input_name : "slug"
  });
});

Change log:

2017-01-16

  • fix persian chars

2016-11-07

  • fix special chars

2016-11-05

  • escape special charachters

This awesome jQuery plugin is developed by afshinpersian. For more Advanced Usages, please check the demo page or visit the official website.