javascript - Why does javascript matches() return multiple items

Question

I am doing an iframe upload of a file I parse and when I look at the .innerHTML of the iframe, my response is in pre tags. I just want to get the data without the pre tags. I figured since it's a one-off thing we are doing here, and we validate the data server-side, I know that my data will just have the opening and closing pre tags.

On this regex tester: http://www.regular-expressions.info/javascriptexample.html,

I use this regex:

<pre>(.*?)</pre>

On my test data:

<pre>{test : foo}</pre>

On this site, when I ask it to "Show Match", it gives me back

{test:foo}

But when I try this in my actual code, I do:

var iframeContents = $("#postiframe").get(0).contentWindow.document.body.innerHTML;
var re = new RegExp("<pre>(.*?)</pre>");
var results = iframeContents.match(re);
console.log(iframeContents);
console.log("results");
console.log(results);

Note: I had to use the new RegExp style since I couldn't figure out how in Typescript to create a literal regex. In any case, when I log the results,

results[0] looks like:

<pre>{test : foo}</pre>

results[1] looks like:

{test:foo}

Is that correct to get two matches like that?

Answer 1

.match() returns an array.

[0] in the return result is the entire match.

[1] is the first matched group (things in parentheses in the regex)

[2] is the second matched group

and so on...

If you want to get multiple matches with matched groups, then you can use the g flag on the regex and use multiple calls to .exec().

var iframeContents = $("#postiframe").get(0).contentWindow.document.body.innerHTML;
var re = new RegExp("<pre>(.*?)</pre>", "g");
var matches;
while (matches = re.exec(iframeContents)) {
    // matches[1] will be each successive block of text between the pre tags
    console.log(matches[1]);
}

Answer 2

Yes, that is correct.

The result is an array where the first item is the part of the string that matched the entire regular expression, and the following items are the values that was caught using parentheses.

Answer 3

A couple of things:

• To use regex literal, you need to escape / with \ so \/
• Use /g so that you only get the results.

Therefore:

var iframeContents = '<pre>{test : foo}</pre>'
var re = /<pre>(.*?)<\/pre>/g; // you need to escape "/", to get only results use '/g'
var results = iframeContents.match(re);
console.log("results",results);

See live example here