JavaScript/jQuery Regex Replace Input Field with Valid Characters

Question

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.com/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:

Filter all characters other than a-z, A-Z, 0-9, a "-", a "_", and a space.
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!

jdc0589 · Accepted Answer · 2017-06-08 21:34:04Z

8

$("#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);
});

edited Jun 8, 2017 at 21:34

answered Jul 3, 2011 at 20:56

jdc0589

7,0385 gold badges38 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oliver Spryn Over a year ago

Yes, all other characters other than a-z, A-Z, 0-9, a "-", a "", and a space will be ignored. Additionally, "", and a space will be converted into a "-", and it will let the user know when this action has taken place.

jdc0589 Over a year ago

Maybe cause I forgot to put "input.val(text);" in there until a second ago? who knows

Edgar Villegas Alvarado · Accepted Answer · 2011-07-03 21:03:57Z

2

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

answered Jul 3, 2011 at 21:03

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Comments

jerluc · Accepted Answer · 2011-07-03 21:06:04Z

2

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);

edited Jul 3, 2011 at 21:06

answered Jul 3, 2011 at 20:59

jerluc

4,3163 gold badges27 silver badges44 bronze badges

2 Comments

Oliver Spryn Over a year ago

Ohh! Nice! The only thing I would to add to that is an event listener for when the latter regex is fired. Is that possible?

jerluc Over a year ago

If this is referring to the requirement to be able to tell the user whether or not their input has been modified, don't even bother with that type of complexity. I'll add some extra code to my post.

score 1 · Accepted Answer · 2011-07-03 23:59:08Z

1

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.com/.

edited Jul 3, 2011 at 23:59

answered Jul 3, 2011 at 20:57

user456814

3 Comments

ridgerunner Over a year ago

Need to escape that dash in the character class.

user456814 Over a year ago

@ridgerunner I tried it both ways, and both worked, "http://www.theirsite.com/my-1st-gallery".match(/[0-9-]/g);, "http://www.theirsite.com/my-1st-gallery".match(/[0-9\-]/g);. I've checked the regex docs for PHP, Java, and Mozilla JavaScript, and none of them said you have to escape hyphens in a character class. Is there a reference that you know of that says otherwise?

ridgerunner Over a year ago

@Keoki Zee: Within a character class, a dash (hyphen) is a metacharacter used to specify a range. It should be escaped if a literal dash is what you mean to match. However, most regex dialects forgive you if the placement of the (unescaped) dash is such that it can't possibly represent a range (i.e. located at the beginning or end of the class). In your case, you got lucky. See: "Metacharacters Inside Character Classes" at www.regular-expressions.info.

Antonio Petricca · Accepted Answer · 2014-09-08 13:09:20Z

0

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

answered Sep 8, 2014 at 13:09

Antonio Petricca

11.3k6 gold badges47 silver badges91 bronze badges

Collectives™ on Stack Overflow

JavaScript/jQuery Regex Replace Input Field with Valid Characters

5 Answers 5

2 Comments

Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related