diegok / slugit-jquery

Just another jquery slugify plugin

slugIt - just another jQuery slugs generator plugin

I've created this one because I wanted a jQuery slug plugin capable of convert european utf8 chars plus some symbols and easily extensible for custom extra mappings. None of the ones listed on http://plugins.jquery.com/plugin-tags/slug does what I needed.

I got the idea of this plugin after using the excelent perl module Text::Unidecode (http://search.cpan.org/dist/Text-Unidecode/) for this same task server side.

I've taken some chars tables from Django admin urlify.js (http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/media/js/urlify.js) as this one was the most similar aproach to what I was looking to implement over jQuery.

Requirements

Requires JQuery (It should work with all version):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Usage

Load this plugin like any other:

<script type="text/javascript" src="jquery.slugit.js"></script>

Then, you select the source field to be converted:

<form>
    <input type="text" id="slugme"/>
    <input type="text" id="slug"/>
</form>

<script>
    $(function(){
        $('#slugme').slugIt();
    });
</script>

"I love my umbrella'" will be converted to "i-love-my-umbrella"

Options

While the slugIt() method has some defaults that make the previous example to work, you'll be probably inerested in customize for your convenience. These are the available options and their defaults:

{
    events:    'keypress keyup',  // Any sensible jquery event (http://api.jquery.com/category/events/)
    output:    '#slug',           // A selector or function to send the generated slug
    separator: '-',               // A separator which will be use to separate words

    map:       false,             // A hash with extra replacemets.
                                  // You can overwrite default replacements just passing the
                                  // ones you like to replace.

    before:    false              // Callback that will be fired before processing slug (you can modify the input)
    after :    false              // Callback that will be fired after processing slug (You can modify the slug)
}

Examples

You can add some extra mappings:

<script>
    $(function(){
        $('#slugme').slugIt({ map: { '☂': 'umbrella' } });
    });
</script>

...So, "I ♥ my ☂'" will be converted to "i-love-my-umbrella"

Or customize word separator:

<script>
    $(function(){
        $('#slugme').slugIt({ separator: '_' });
    });
</script>

Now, "I love my umbrella'" will be converted to "i_love_my_umbrella"

Working examples can be found at http://github.com/diegok/slugit-jquery/tree/master/examples/

Licensing

BSD License can be found at http://www.opensource.org/licenses/bsd-license.php

slugit-jquery's Issues

More sanitizing...

I offer to add more map to prevent illegal chars in url.

function custom_map() {
return {
'+':'-','!':'-','(':'-',')':'-','&':'and','*':'-',"'":'-'
};
}

Good Work

[enhancement] Add missing bower.json.

Hey, maintainer(s) of diegok/slugit-jquery!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library diegok/slugit-jquery is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "diegok/slugit-jquery",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

How about handle apostrophe?

Hi @diegok ,
this's very useful jquery plugin.. thank u so much.. 👍
I have one question,
In my experience use your jquery plugin, i founded the apostrophe was still appear..
How to handle this? so the slug can more pretty :)

! char is not escape

Hi,

The ! char isn't escape.

How can we fix it ?

Thanks

Example with after function

Could I ask for an example with "after" function?

Feature Request: slugit on cdnjs

For easier usage, slugit jquery should get hosted at cdnjs.

Function as an output

Here is a patch that would allow a function as output:

if(typeof opts.output == "function"){
opts.output(slug)
} else {
jQuery(opts.output).val(slug); // input or textarea
jQuery(opts.output).html(slug); // other dom elements
}

PS: I am releasing it under the BSD license as well ;)

Numerous inputs have same classes on one page same output

I know, this is natural. Same classes inputs give same outputs.

But, I should use after or before or find etc. selector for output. but $(this) give us blank selector property.

Example:

$('input.username').slugIt({
   output: $(this).next('.userslug');
});
$('input.username').slugIt({
   output: $(this).parent().find('.userslug');
});

Forwhat: I have multiple inputs for article title on form, because I developed multilanguaged cms. Language number may change.

Thanks, Have a nice day.