jQuery StringToSlug

Convert any string into slugs and bind using jQuery

Download 2.1.0 (zip) Download 2.1.0 (tar.gz) View on Github

Getting Started

Install via Bower Installing StringToSlug via Bower will also give you jQuery and SpeakingURL

bower install --save jquery.stringtoslug

Add jQuery, SpeakingURL and stringToSlug to your html

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

Basic Usage


English / Latin by default

Example
Code
<input type="text" class="basic-usage" />
<input type="text" id="permalink" />
$(document).ready( function() {
    $(".basic-usage").stringToSlug();
});

Settings

All settings are optional and work as a default as set out in the table below:

StringToSlug Settings
Setting Type Description Default
setEvents string jQuery events to bind 'keyup keydown blur'
getPut string The jQuery selector that will output the converted string (slug) '#permalink'
space string Separator char that will be replaced for every space '-'
prefix string A prefix that will be concatenated in front of the slug ''
suffix string A suffix that will be concatenated at the end of the slug ''
replace regExp A regular expression to replace/remove the string ''
AND string The default value of '&' which normally means 'and' 'and'
options object | string Use options to customize the SpeakingURL library {}
callback function A callback function that will be called after every bind defined on setEvents false
Code
$(document).ready( function() {
    $(".basic-usage").stringToSlug({
        setEvents: 'keyup keydown blur',
        getPut: '#permalink',
        space: '-',
        prefix: '',
        suffix: '',
        replace: '',
        AND: 'and',
        options: {},
        callback: false
    });
});

Set Events

Use the setting setEvents to choose events to bind

Example

focus-on-this-input-and-after-blur-it-will-be-converted-into-a-slug

Code
<input type="text" class="input-to-slug" />
<p id="permalink"></p>
$(document).ready( function() {
    $(".input-to-slug").stringToSlug({
        setEvents: 'blur'
    });
});

Set a different selector for the preview (getPut)

Use the setting getPut to choose an output. jQuery StringToSlug works for html elements or inputs

Example with Twitter Bootstrap 3 .alert.alert-info
replace-me-with-some-dummy-data
Code
<input type="text" />
<div class="alert alert-info"></div>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        getPut: '.alert.alert-info'
    });
});

Set a different separator character for spaces

Use the setting space to choose a separator replacement

Example with underscore instead of dash

replace_me_with_some_dummy_data_and_check_the_separator

Code
<input type="text" />
<p id="permalink"></p>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        space: '_'
    });
});

Set a Prefix

Use the setting prefix to choose a prefix

Example with prefix js-

js-selector-for-javascript

Code
<input type="text" />
<p id="permalink"></p>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        prefix: 'js-'
    });
});

Set a Suffix

Use the setting suffix to choose a suffix

Example with suffix .jpg

suffix-for-images.jpg

Code
<input type="text" />
<p id="permalink"></p>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        suffix: '.jpg'
    });
});

replace

Use the setting replace to replace/remove some pattern

Example removing content between parentheses with replace and the regex /\s?\([^\)]*\)/gi

product-example

Code
<input type="text" />
<p id="permalink"></p>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        replace: /\s?\([^\)]*\)/gi,
    });
});

AND

Use the setting AND to choose a different replacement for '&'

Example with AND in Spanish (Español)

el-y-ella

Code
<input type="text" />
<p id="permalink"></p>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        AND: 'y'
    });
});

options

Use options to customize SpeakinURL.

Example with options from SpeakingURL defining the language to Arabic and using titleCase pattern

Text-In-Arabic-htha-hw-alakhtbar-ma-allghh-alarbyh-With-TitleCase-Pattern

Code
<input type="text" />
<p id="permalink"></p>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        options: {
            lang: 'ar',
            titleCase: true
        }
    });
});

callback

Use callback to call a function after stringToSlug.

Example will print a warning on your developer tool as a callback

open-your-console-from-developer-tools-and-check-the-warning

Code
<input type="text" />
<p id="permalink"></p>
$(document).ready( function() {
    $('[type="text"]').stringToSlug({
        callback: function(text) {
            console.warn('This warn is a callback: ' + text);
        }
    });
});