Question

$('.s').keyup(function(e) {

    if (!/[A-Za-z0-9]/.test(String.fromCharCode(e.which))) {
        return false;
    }

I wonder what is the best regex solution for my application.
I have an ajax-based search that should just trigger the search when actual characters are pressed like a-Z (upper and lowercase), numbers and maybe a questionmark, a dash(hyphen), and an exclamation mark. Also the spacebar should be enabled.

Otherwise the ajax search would be triggered as well if the shift-, option, or control-key, is pressed.

What’s the easiest regex pattern to understand here?
thank you for your help

Answer 1

The basic form of your regex seems fine, just include what you want to include, and be aware of accented characters. Alternately, you might exclude the characters you don’t want.

But I’d use the keypress event rather than keyup event for this. keypress fires when an actual typeable character is typed, and fires on key repeat (whereas you only get one keyup even if a key repeats). keypress is not fired for Shift, Meta, Ctrl, etc. Update: This isn’t necessarily true cross-browser (sigh), see the update below.

If you’re hooking keypress, I probably wouldn’t filter anything out (no need for the regex), because I’d rather defer to the browser and its awareness of locale for what consitutes a real character. I’d also probably include a brief delay so as to avoid lots of unnecessary searches. If the person fairly rapidly types “fred” there’s no need to search on “f”, “fr”, and “fre”.

Here’s an example of what I mean (combining keypress with a slight delay). If you really want to filter out certain chars, you can do that in the event handler, but I haven’t below for the reasons above:

HTML:

<input type='text' id='theText'>

JavaScript (using jQuery, since you tagged your question with jquery):

jQuery(function($) {
  var searchTimer = 0;

  $('#theText').keypress(function() {
    if (searchTimer != 0) {
      clearTimeout(searchTimer);
    }
    searchTimer = setTimeout(doSearch, 250);
  });

  function doSearch() {
    searchTimer = 0;
    display("Search: '" + $('#theText').val() + "'");
  }

  function display(msg) {
    $('<p/>').html(msg).appendTo(document.body);
  }
});​

Live copy

That example searches a quarter second after the last keypress it sees; adjust the parameter to setTimeout as you see fit.

---

Update: After your comment below about arrow keys, I thought “but you don’t see arrow keys on keypress, do you?” and the answer is: You do on Opera and a couple of others. sigh So yes, with a filter:

$('#theText').keypress(function(event) {
  // Magic numbers from http://unixpapa.com/js/key.html
  switch (event.keyCode) {
    case 37: // Left
    case 38: // Up
    case 39: // Right
    case 40: // Down
      break;

    default:
      // A "real" key, include it
      if (searchTimer != 0) {
        clearTimeout(searchTimer);
      }
      searchTimer = setTimeout(doSearch, 250);
  }
});

function doSearch() {
  searchTimer = 0;
  display("Search: '" + $('#theText').val() + "'");
}

Live copy (this one just filters out the arrow keys; you’ll want to extend that)

If you don’t already know if it, this page is great for information around the madness that is keyboard events across browsers. It may be slightly dated.