Advanced URL Slug Generator With jQuery - stringToSlug

File Size: 72 KB
Views Total: 2082
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Advanced URL Slug Generator With jQuery - stringToSlug

stringToSlug is an advanced and highly customizable slug generator to create SEO-friendly and human-readable slugs from any strings (typically article and post titles).

Requires the SpeakingURL library to remove special characters and convert the string to lowercase.

More Features:

  • Divides words by a specific separator. Defaults to '-'.
  • Supports prefix and suffix.
  • Allows to replace any strings using Regex.
  • Execute a function after a slug has been generated.

How to use it:

1. Load the required jQuery and SpeakingURL libraries from CDN.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/speakingurl.min.js"></script>

2. Load the jQuery stringToSlug plugin right before the closing body tag.

<script src="dist/jquery.stringtoslug.min.js"></script>

3. Create an input field to accpet the article and post title.

<input type="text" class="example" />

4. Create an element named permalink to hold the generated URL slug.

<input type="text" id="permalink" disabled="disabled" />
<!-- Or Any Other Element -->
<p id="permalink"></p>

5. Attach the function stringToSlug to the input field and done.


6. Override the default selector of the output field.

  getPut: '#permalink'

7. Customize the events to trigger the conversion.

  setEvents: 'keyup keydown blur'

8. Customize the separator by which the plugin divide words in the slug.

  space: '-'

9. Append suffix & prefix to the URL slug.

  prefix: '',
  suffix: ''

10. Replace AND (&) character in the URL slug.

  AND: 'and

11. You can also replace any useless and meaningless characters to generate clean URL slugs.

  replace: '' // RegExp replacement: /\s?\([^\)]*\)/gi

12. Execute a callback function after the slug has been generated.

  callback: function(text) {
    console.log('Callback: ' + text);

13. Pass the SpeakingURL options to the plugin.

  options: {
    // refers to

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