Javascript Auto Slugify
HTML
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<input type="text" class="title" placeholder="Type anything..">
<input type="text" class="slug">
CSS
input{
height: 40px;
}
JavaScript
function slugify(str) {
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
// remove accents, swap ñ for n, etc
var from = "àáäâèéëêìíïîòóöôùúüûñç·/-,:;";
var to = "aaaaeeeeiiiioooouuuunc______";
for (var i=0, l=from.length ; i<l ; i++)
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
.replace(/\s+/g, '_') // collapse whitespace and replace by -
.replace(/_+/g, '_'); // collapse dashes
return str;
}
$('.title').keyup(function(){
//console.log($(this).val());
$slug = slugify($(this).val());
$('.slug').val($slug);
})