I am building a CMS where a user can customize the SEO URL of a page via a text input control. For example, say the user is creating a gallery, and they want their page to be accessed at .

Notice how the "my-1st-gallery" portion doesn't contain any illegal characters for a URL. Since most users won't know what is allowed and not allowed, I'd like to create a JavaScript regex filter which can filter/convert all illegal characters on key-up.

I know how to use jQuery/JavaScript to listen for key-up events, but I'm not sure how to use a regex to do the following:

1. Filter all characters other than a-z, A-Z, 0-9, a "-", a "_", and a space.
2. Change any "_" and spaces to a "-", and let the user know that the given character has been converted into "-".

Could someone provide a good example of how to do the regex part. Again, I understand how to listen for key-up events.

Ok, with all of these good answers, I think I can piece this together for my web app. I wish I could select more than one answer as my final! :S Thank you all!

I am building a CMS where a user can customize the SEO URL of a page via a text input control. For example, say the user is creating a gallery, and they want their page to be accessed at http://www.example./my-1st-gallery.

Notice how the "my-1st-gallery" portion doesn't contain any illegal characters for a URL. Since most users won't know what is allowed and not allowed, I'd like to create a JavaScript regex filter which can filter/convert all illegal characters on key-up.

I know how to use jQuery/JavaScript to listen for key-up events, but I'm not sure how to use a regex to do the following:

1. Filter all characters other than a-z, A-Z, 0-9, a "-", a "_", and a space.
2. Change any "_" and spaces to a "-", and let the user know that the given character has been converted into "-".

Could someone provide a good example of how to do the regex part. Again, I understand how to listen for key-up events.

Ok, with all of these good answers, I think I can piece this together for my web app. I wish I could select more than one answer as my final! :S Thank you all!

• javascript
• jquery
• regex
• filtering
• jquery-events

5 Answers 5

$("#inputElement").keyup(function() {
    var input = $(this),
    var text = input.val().replace(/[^a-zA-Z0-9-_\s]/g, "");
    if(/_|\s/.test(text)) {
        text = text.replace(/_|\s/g, "");
        // logic to notify user of replacement
    }
    input.val(text);
});

You could do something like this (asuming you have the character stored in the key variable)

if(key.test(/[_\s]/)){
   key = "-";
   alert("key changed to -");  
}
if(!key.test(/[a-zA-Z0-9\-]/g){
  key = "";
  alert("Invalid key");
}

Hope this helps. Cheers

Regular expression to remove all characters other than what you have specified is allowed and then replace "_" and " " with "-":

var inputVal = $('input.myField').val();
var newVal = inputVal.replace(/[^A-Za-z0-9\-_\s]/g, '').replace(/[_\s]/g, '-');
if (newVal != inputVal) {
  alert('We modified something!');
  // Do some more things...
}
$('input.myField').val(newVal);

This will filter the characters for (1):

/[^a-zA-Z0-9\-_ ]/g

The / are regex delimiters in JavaScript. The [] delimit a character class, and the ^ inside of the character class means "match all characters not contained inside this class". Then you can specify individual characters inside the class (like "-" and "_"), or specify a range (like "a-z").

The g outside the delimiters is used as a flag for "global search", which just means that the regex matches more than once, otherwise it will stop at the first match and then stop searching. The \ is used as an escape character, which I use to escape the hyphen in the character class, because it's used as a meta character inside character classes to specify character ranges.

I'm not actually sure if that's necessary, because I haven't found anything in the Java, PHP, and Mozilla JavaScript regex docs that say hyphens need to be escaped like that, and my tests in Firefox 5 and Chrome 12 show that it works either way.

You can read more about JavaScript regex at the Mozilla docs, and test your regexes at http://regexpal./.

I'm using this plugin jQuery : http://www.thimbleopensource./tutorials-snippets/jquery-plugin-filter-text-input.