Question

I am building a CMS news sections with a few fields but the ones notably needed for this question are the “Title” and “URL Reference” fields. When a user enters in an article title I want Javascript/jQuery to replace the text from the Title field and create a “clean” URL fragment by removing any spaces and weird characters with a dash(-).

e.g.

Kris’ FUN new Article (Title)

kris-fun-new-article (URL Reference)

Here is the code, but I can’t seem to figure out how to replace multiple spaces and special characters

$('#title').keyup(function(){
    var ref = $(this).val().toLowerCase().replace('\ ','-');
    $('#reference').val(ref);
});

Also, like in the title “Kris’ FUN new Article” the regex should replace “Kris’ “(quote and space) with “kris-“(one dash). Essentially recognize if there are two special characters beside one another and replace is with one dash. NOT like this “kris–fun-new-article”.

Thanks in advance

Answer 1

Samir Talwar’s answer is correct, except that there needs to be a flag /…/g on the end of the regular expression to indicate a global match. Without the /…/g only the first match is replaced.

Torez, here is the updated version of your function:

$('#title').keyup(function(){
    var ref = $(this).val().toLowerCase().replace(/[^a-z0-9]+/g,'-');
    $('#reference').val(ref);
});

(Sorry, Samir, I would have just commented on your response, except I do not have enough reputation points yet.)