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 via bower will get jQuery and SpeakingURL as well

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 / Lating by default

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

Options

All options are optional and will work as default following the table bellow:

StringToSlug Options
Option Type Description Default
setEvents string jQuery events to bind 'keyup keydown blur'
getPut string The jQuery selector that will output the slugged string '#permalink
space string Separator char that will be replaced for every space '-'
prefix string A prefix that will be concatenated before string slugged ''
suffix string A suffix that will be concatenated before string slugged ''
replace regExp A Regular Expression to replace/remove the string ''
AND string The default value of & which normally means and 'and'
options object | string This option is used to custom 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 option setEvents to choose events for bind

Example

focus-on-this-input-and-after-blur-it-will-be-slugged

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

Set different output (getPut)

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

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 different separator (space)

Use the option 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 option 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 option suffix to choose a suffix.

Example with suffix js-

suffix-for-images.jpg

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

replace

Use the option 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 option AND to choose a different replacement for &.

Example with and 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 changing 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 warn 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);
        }
    });
});