http://blog.bigbinary.com/2010/03/31/regular-expressions-in-JavaScript.html
Regular expression in JavaScript
Regular expressions is a powerful tool in any language. Here I am discussing how to use regular expression in JavaScript.
Defining regular expressions
In JavaScript regular expression can be defined two ways.
var regex = /hello/ig; // i is for ignore case. g is for global.
var regex = new RegExp("hello", "ig");If I am defining regular expression using RegExp then I need to add escape character in certain cases.
var regex = /hello_w*/ig;
var regex = new RegExp("hello_\w*", "ig"); //notice the extra backslash before wWhen I am defining regular expression using RegExp then w needs to be escaped otherwise it would be taken literally.
test method
test method is to check if a match is found or not. This method returns true or false.
var regex = /hello/ig;
var text = 'hello_you';
var bool = regex.test(text);exec method
exec method finds if a match is found or not. It returns an array if a match is found. Otherwise it returns null.
var regex = /hello_w*/ig;
var text = 'hello_you';
var matches = regex.exec(text);
console.log(matches); //=> hello_youmatch method
match method acts exactly like exec method if no g parameter is passed. When global flag is turned on the match returns an Array containing all the matches.
Note that in exec the syntax was regex.exec(text) while in match method the syntax istext.match(regex) .
var regex = /hello_w*/i;
var text = 'hello_you and hello_me';
var matches = text.match(regex);
console.log(matches); //=> ['hello_you']Now with global flag turned on.
var regex = /hello_w*/ig;
var text = 'hello_you and hello_me';
var matches = text.match(regex);
console.log(matches); //=> ['hello_you', 'hello_me']Getting multiple matches
Once again both exec and match method without g option do not get all the matching values from a string. If you want all the matching values then you need to iterate through the text. Here is an example.
Get both the bug numbers in the following case.
var matches = [];
var regex = /#(d+)/ig;
var text = 'I fixed bugs #1234 and #5678';
while (match = regex.exec(text)) {
matches.push(match[1]);
}
console.log(matches); // ['1234', '5678']Note that in the above case global flag g. Without that above code will run forever.
var matches = [];
var regex = /#(d+)/ig;
var text = 'I fixed bugs #1234 and #5678';
matches = text.match(regex);
console.log(matches);In the above case match is used instead of regex . However since match with global flag option brings all the matches there was no need to iterate in a loop.
match attributes
When a match is made then an array is returned. That array has two methods.
- index: This tells where in the string match was done
- input: the original string
var regex = /#(d+)/i;
var text = 'I fixed bugs #1234 and #5678';
var match = text.match(regex);
console.log(match.index); //13
console.log(match.input); //I fixed bugs #1234 and #5678replace
replace method takes both regexp and string as argument.
var text = 'I fixed bugs #1234 and #5678';
var output = text.replace('bugs', 'defects');
console.log(output); //I fixed defects #1234 and #5678Example of using a function to replace text.
var text = 'I fixed bugs #1234 and #5678';
var output = text.replace(/d+/g, function(match){ return match * 2});
console.log(output); //I fixed bugs #2468 and #11356Another case.
// requirement is to change all like within <b> </b> to love.
var text = ' I like JavaScript. <b> I like JavaScript</b> ';
var output = text.replace(/<b>.*?</b>/g, function(match) { return match.replace(/like/g, "love") } );
console.log(output); //I like JavaScript. <b> I love JavaScript</b>Example of using special variables.
$& - the matched substring.
$` - the portion of the string that precedes the matched substring.
$' - the portion of the string that follows the matched substring.
$n - $0, $1, $2 etc where number means the captured group.var regex = /(w+)s(w+)/;
var text = "John Smith";
var output = text.replace(regex, "$2, $1");
console.log(output);//Smith, Johnvar regex = /JavaScript/;
var text = "I think JavaScript is awesome";
var output = text.replace(regex, "before:$` after:$' full:$&");
console.log(output);//I think before:I think after: is awesome full:JavaScript is awesomeReplace method also accepts captured groups as parameters in the function. Here is an example;
var regex = /#(d*)(.*)@(w*)/;
var text = 'I fixed bug #1234 and twitted to @javascript';
text.replace(regex,function(_,a,b,c){
log(_); //#1234 and twitted to @javascript
log(a); //1234
log(b); // and twitted to
log(c); // javascript
});As you can see the very first argument to function is the fully matched text. Other captured groups are subsequent arguments. This strategy can be applied recursively.
var bugs = [];
var regex = /#(d+)/g;
var text = 'I fixed bugs #1234 and #5678';
text.replace(regex, function(_,f){
bugs.push(f);
});
log(bugs); //["1234", "5678"]Split method
split method can take both string or a regular expression.
An example of split using a string.
var text = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
var output = text.split(',');
log(output); // ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]An example of split using regular expression.
var text = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
var regex = /s*;s*/;
var output = text.split(regex);
log(output); // ["Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand "]Non capturing Group
The requirement given to me states that I should strictly look for word java, ruby or rails within word boundary. This can be done like this.
var text = 'java';
var regex = /java|ruby|rails/;
text.match(regex);Above code works. However notice the code duplication. This can be refactored to the one given below.
var text = 'rails';
var regex = /(java|ruby|rails)/;
text.match(regex);Above code works and there is no code duplication. However in this case I am asking regular expression engine to create a captured group which I’ll not be using. Regex engines need to do extra work to keep track of captured groups. It would be nice if I could say to regex engine do not capture this into a group because I will not be using it.
?: is a special symbol that tells regex engine to create non capturing group. Above code can be refactored into the one given below.
var text = 'rails';
var regex = /(?:java|ruby|rails)/;
text.match(regex);text = '#container a.filter(.top).filter(.bottom).filter(.middle)';
matches = text.match(/^[^.]*|.[^.]*(?=))/g);
log(matches);