LA.NET [EN]

Nov 04

Regular expressions and JavaScript

Posted in Javascript      Comments Off on Regular expressions and JavaScript

After writing my last post on getting style properties from JavaScript, I’ve noticed that I still haven’t written anything about JavaScript and regular expressions…and that’s why I’ll be writing a couple of posts on this topic. Before going on, a disclaimer: I’m not really an expert on regular expressions (do note that people have written books on them! and since we’re at it, I’m not really an expert in any field…but I’m really curious and that counts, right? 🙂 ,,). However, I guess I’ll be able to share with you some of the basics about them I’ve picked along the years.

I think I won’t be far from truth by saying that you can see regular expressions as a language which you can use to search, replace and extract data from/in an existing string. Unfortunately, regular expressions tend to be rather cryptic… and that means that they might be hard to read and/or write. A regular expression is always a string which might use one or more characters from a special characters’ list. Special characters are so called because they have a special meaning. For instance, d means something like “match any digit”…I’m not going to show you all speciall characters here. Instead, I’ll redirect you to this page.

I’ve already mentioned that writing and reading complex regular expressions is not for those who have heart problems…the main problem I see with them is that, unlike traditional code, you can’t really use white spaces nor can you use comments for explaining something better (notice that I’m talking about the regular expression itself here). A regular expression string is really a compact string which gets harder and harder to read as you get better at understanding them…

In JavaScript, regular expressions are represented by RegExp objects. Instantiating a RegExp object means that you’ll have to (at least!) pass an expression which identifies a pattern. If you want, you can also specify the type of operation which should performed by specifying an optional flags parameter (for instance, passing “i” to it means you don’t care about case). Here’s a quick example of a new Regular expression which will match strings which have at least 1 digit:

var reg = new RegExp("\d");
alert(reg.test("have 1 digit"));

The previous snippet introduced one of the methods exposed by the RegExp class: the test method. You can use it for checking if the string that was passed to it matches the regular expression encapsulated by that RegExp object. There’s still one more interesting thing to notice about the previous snippet: we had to escape the char since we’re using a string to define the regular expression.

Notice that JavaScript also supports the concept of regular expression literal. A regular expression literal is delimited by a pair of slashes (/reg. expression goes here/). For instance, the next snippet is equivalent to our first example:

alert(/d/.test("have 1 digit"));

In case you’re wondering, the flag parameter can also be specified when using regular expression literals:

alert(/d/g.test("have 1 digit"));

If you need to, you can pass several flags by just putting the corresponding letters after the ending slash (don’t worry to much about these flags…we’ll come back to them in future pots). Most of the time, you’ll probably end up using regular expressions literals due to their compactness (when compared with the equivalent RegExp instantiation).

As you can probably guess, the hardest part on using regular expressions is building the regular expression itself. And that’ what we’ll start looking at on the next post. Stay tuned for more on regular expressions and JavaScript.