Wednesday, April 05, 2017

jQuery - How to convert a Title to a URL slug

Title : <input type="text" name="title" id="title"><br>
Slug  : <input type="text" name="slug-title" id="slug-title">


var slug = function(str) {
    var slug1 = '';
    var trimmed = $.trim(str);
    slug1 = trimmed.replace(/[^a-z0-9-]/gi, '-').
    replace(/-+/g, '-').
    replace(/^-|-$/g, '');
    return slug1.toLowerCase();
}
       
$("#title").keyup(function(){       
    var Text = $(this).val();
    $('#slug-title').val(slug(Text));             
});

$("#slug-title").keyup(function(){       
    var Text = $(this).val();
    $('#slug-title').val(slug(Text));             
});

Output:
Title: 123@345#456&421*322
Slug : 123-345-456-421-322

Demo : https://jsfiddle.net/vasashiner/Ltg06sax/