Multiple Subexpression Matching in JavaScript

Album Cover: Life in 1472

"Even with a patch on my eye, I'm dreamy."
Slick Rick / Fresh

Posted on October 16, 2005 2:23 AM in Programming
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

I've wasted about four hours of my life tonight trying to figure out how to achieve the same outcome of PHP's preg_match_all() function (described here) in JavaScript.

Apparently JavaScript users aren't as prone to using regular expressions as Perl and PHP developers are? I don't know, but finding the solution to my problem was pretty frustrating.

If you Google for "JavaScript regular expressions" you'll doubtless find a list of badly designed websites that think they are doing you a favor by explaining the difference between RegEx objects and literals and by pointing out "regular expression" functions like match(), search() and replace(). Okay, that is fine, but how about paying attention to one of the most useful and arguably most used functions of regular expressions and making sure the JavaScript equivalent is at least somewhat visible!

Well, if you want it done right, do it yourself right? So here it is, an example of how to match multiple subexpressions in JavaScript, thanks to a tasty little nugget of knowledge I uncovered in JavaScript: The Definitive Guide:

var junk = "Blue cats eat blue fish that eat blue bugs.";
var regex = /blue (w+)/gi;
while((m = regex.exec(junk)) != null)
  alert("Match: " + m[1]);

If you run that code in your browser, you'll see three alert boxes show up — one for each matched subexpression in the "haystack" string. So you should see "Match: cats" followed by "Match: fish" and then, finally, "Match: bugs."

Well, now that I've finally figured that out, I should probably go to bed and hope the Seahawks give me a birthday win tomorrow.

Comments

jacky on November 03, 2005 at 8:29 AM:

Tnx a lot mate, was searching for the same thing, glad I found your post!!

Permalink

miles on March 07, 2006 at 6:17 PM:

thanks for sharing this information, and thereby saving the rest of us lazy b*st*rds time.

kudos

Permalink

massive on June 16, 2006 at 12:18 AM:

yep, you are a lifesaver

Permalink

Zeest on July 01, 2006 at 5:36 AM:

OMG thankyou so much been breaking my head on this since morning its been a good 6hrs. Phew!!!

Permalink

Jim Rogers on July 04, 2006 at 9:18 AM:

You're exactly right about those other sites; it's hard to find some real documentation on this stuff. Thanks for taking the time to post this.

Permalink

andre.roesti on August 06, 2010 at 11:28 AM:

Even if it's years later, the post still helped me. Thank you!

I first tought that it would be enough to set the «g»-Flag, but that didn't change anything. Confusing.

Permalink

Kem Mason on August 05, 2011 at 10:39 AM:

This is pretty old, but I found it useful still -- one thing that needs to be tweaked though -- the regex I see is:
var regex = /blue (w+)/gi;
it should be:
var regex = /blue (w+)/gi;

to work with the version of javascript installed with Firefox 5.0 at least.

Permalink

Pete Gardner on September 12, 2012 at 10:35 AM:

Wow. Awesome. You saved my a pile of time. Your contribution is truly appreciated!

Permalink

sandeep on November 26, 2014 at 3:26 AM:

Gr8 example. Can you also tell how to get index for the sub expressions? For ex, in the example you gave how to find index of matches cat, fish and bugs in the main string?

Permalink

defiance-tech on September 26, 2016 at 11:27 PM:

In almost all of the early child years programs along with schools, technology will join in on the mastering landscape of the future. To be sure this brand-new technology is utilized effectively, we've got to assure that will teachers are generally fully skilled and recognized, and that this programs and internet websites used are generally developmentally correct, non-racist, non-biased against those with disabilities, along with respect non secular differences.

Permalink

heroes 2 health care on September 26, 2016 at 11:27 PM:

Your question involving health priorities is surely an extremely critical one, and a new question which will effectively always be both inquired and answered with the individual themselves to what their individual health points are. You will find there's tendency using all things regarding wellbeing to talk about other men and women or so-called authorities either at the governmental as well as medical as well as professional amount. The matter of wellbeing priorities actually is the term for a model's own distinct needs, and this sort of needs could only genuinely be identified and understood with the individual them selves.

Permalink

xbox on November 03, 2016 at 5:27 AM:

Much obliged to you for the redesign, exceptionally decent site.. chaturbate.com token hack key free xbox 360 games

Permalink

netflix on December 20, 2016 at 4:27 AM:

In the event that you set out to make me think today; mission achieved! I truly like you're composing style and how you express your thoughts. Much obliged to you. play minecraft demo netflix free trial 3 months

Permalink

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.