Slugify demo

http://github.com/stipsan/String.Slugify.js/

HTML

<input id="title" type="text" placeholder="Title" autocomplete="off" value="slugify  ME    n%ø#w" autofocus />
<input id="slug" type="text" placeholder="slug" readonly />

CSS

input {
    width: 98%;
    padding: 1%;
    margin-bottom: 1%;
    border: 1px solid silver;
    
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-box-shadow: hsla(0, 0%, 0%, 0.6) 0px 0px 1px, hsla(0, 0%, 0%, 0.1) 0px 2px 10px inset;
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 0%, .05)), color-stop(.5, hsla(0, 0%, 50%, .05)), to(hsla(0, 0%, 100%, .05)));
    background-image: -moz-linear-gradient(
        center top,
        hsla(0, 0%, 0%, .05) 0%,
        hsla(0, 0%, 50%, .05) 50%,
        hsla(0, 0%, 100%, .05) 100%
    );
    -webkit-transition: border-color 600ms ease-in;
    -moz-transition: border-color 600ms ease-in;
    transition: border-color 600ms ease-in;
}

input:focus {
    outline: none;
    border-color: blue;
    border-color: hsla(240, 100%, 50%, 0.6);
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 0%, .1)), color-stop(.5, hsla(0, 0%, 50%, .1)), to(hsla(0, 0%, 100%, .1)));
    background-image: -moz-linear-gradient(
        center top,
        hsla(0, 0%, 0%, .1) 0%,
        hsla(0, 0%, 50%, .1) 50%,
        hsla(0, 0%, 100%, .1) 100%
    );
    -webkit-transition: border-color 300ms ease-out;
    -moz-transition: border-color 300ms ease-out;
    transition: border-color 300ms ease-out;
}

JavaScript

(function()
{
    String.implement(
    {
        slugify: function( replace )
        {
            if( !replace ) replace = '-';
            var str = this.toString().tidy().standardize().replace(/[\s\.]+/g,replace).toLowerCase().replace(new RegExp('[^a-z0-9'+replace+']','g'),replace).replace(new RegExp(replace+'+','g'),replace);
            if( str.charAt(str.length-1) == replace ) str = str.substring(0,str.length-1);
            return str;
        }
    });
})();

var slugify = function(){
    $('slug').set('value', $('title').get('value').slugify());
};

['keyup', 'change', 'blur'].each(function(event){
    this.addEvent(event, slugify);
}, $('title'));

//Shame this event isn't videly supported. 
//It's way better than using the tree events above
$('title').addEventListener('input', slugify);

//Slugify initial string
slugify();