Geek Answers Handbook

JavaScript / jQuery Regex Replace the input field with valid characters

I am creating a CMS where a user can customize the URL of an SEO page using a text input control. For example, let's say a user creates a gallery, and they want their page to be accessed at http://www.theirsite.com/my-1st-gallery .

Please note that the "my-1st-gallery" part does not contain any illegal characters for the URL. Since most users do not know what is allowed and not allowed, I would like to create a JavaScript regular expression filter that can filter / convert all illegal characters when a key is pressed.

I know how to use jQuery / JavaScript to listen for events with a key, but I'm not sure how to use a regular expression to do the following:

  • Filter out all characters other than az, AZ, 0-9, "-", "_" and space.
  • Change any "_" and spaces to "-", and tell the user that this character has been converted to "-".

Can anyone provide a good example of how to make part of a regular expression. Again, I understand how to listen to events with the keyboard.

Thank you for your time!

Ok, with all these good answers, I think I can put this together for my web application. I'm sorry that I can not choose more than one answer as a final !: S Thank you all!

+4
source share
5 answers
$("#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); });
+8
source

A regular expression to remove all characters other than what you specify 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);
+2
source

You can do something like this (assuming you have a 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. Greetings

+2
source

This will filter the characters for (1):

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

/ are regular expression delimiters in JavaScript. [] will separate the character class, and ^ inside the character class means "combine all non characters contained within this class." You can then specify individual characters within the class (for example, "-" and "_") or specify a range (for example, "az").

g outside the delimiters is used as a flag for "global search", which means that the regular expression matches more than once, otherwise it stops at the first match and then stops the search. \ used as an escape character, which I use to remove a hyphen in a character class, because it is used as a metacharacter inside character classes to indicate character ranges.

I'm not sure if this is necessary because I did not find anything in the JavaScript, PHP, and Mozilla JavaScript documents that say hyphens should be escaped this way, and my tests in Firefox 5 and Chrome 12 show that it works in any case.

Learn more about JavaScript regex in Mozilla docs and check your regex at http://regexpal.com/ .

+1
source

More articles:


All Articles