What does this line of Javascript Regex do?

Question

The line in question is this one:

var extendedXmp = (data.match(/xmpNote:HasExtendedXMP="(.+?)"/i) || [])[1];

It is part of the bigger code chunk here:

this.parseCompoundImage = function(data) { var extendedXmp = (data.match(/xmpNote:HasExtendedXMP="(.+?)"/i) || [])[1]; if (extendedXmp) { // we need to clear out JPEG's block headers. Let's be juvenile and don't care about checking this for now, shall we? // 2b + 2b + http://ns.adobe.com/xmp/extension/ + 1b + extendedXmp + 4b + 4b data = data.replace(new RegExp('[\\s\\S]{4}http:\\/\\/ns\\.adobe\\.com\\/xmp\\/extension\\/[\\s\\S]' + extendedXmp + '[\\s\\S]{8}', 'g'), '') } var xmp = data.match(/<x:xmpmeta [\s\S]+?<\/x:xmpmeta>/g), result = {} if (!xmp) throw "No XMP metadata found!"; xmp = xmp.join("\n", xmp);

Which comes from the source code of the depthy app. This chunk of code gets XMP metadata and cleans out the JPEG exif headers using regex. The second line of this code is what confuses me. From what I understand is it tries to match a certain pattern in the data, but I'm not familiar enough with javascript to understand it. Can someone explain to me what that line does?

Thanks

What part confuses you? the regex pattern itself or call to match or the || [], or the [1] at the end? There's actually a lot going on in that line, and maybe you just need to break it down and try to understand each bit by itself. — p.s.w.g
– p.s.w.g, Commented Apr 23, 2014 at 23:55
What confuses me is that from my understanding match is supposed to return a string, but it is then compared with [], What is it trying to achieve? Finally, the [1] just means taking the second character correct? — Shef
– Shef, Commented Apr 23, 2014 at 23:57
Thanks. I understand now: The file has a line that says xmpNote:HasExtendedXMP="FF72..."/> This code matches FF72.... If the annotation is not present, it replaces it with an empty array. Do you want to write it as an answer so I can accept it? — Shef
– Shef, Commented Apr 24, 2014 at 0:03

tenub · Accepted Answer · 2014-04-24 00:15:34Z

[1] references the first and only capture group, (.+?). The .match() method returns an array consisting of the full match (0th element) and any capture groups will fill the other values in the array. It only works this way when the g flag is not set.

|| [] sets extendedXmp to an empty array when a match is not found. It's a somewhat neat feature of JavaScript and a way to set a variable if an evaluation results in a "falsey" value, although I tend to avoid it for the sake of being more obvious and clear in what I'm writing. That being said, there's no real reason to do this judging by the code. One could just as easily and concisely avoid the whole || [] ordeal and test with if (extendedXmp !== null) instead and it would be more "clean", clear, and easier to read for other developers such as you or me.

The comparison that you suggest would have required another assignment operation – and, for full clarity, another variable – to get the value of the 1 property of the object to which a reference was returned by String.prototype.match(). As it is, both null and undefined are converted to false, so that additional operation is not necessary.
It is possible that the original code was .*? in which case the attribute value can be the zero-length string, which also is converted to false; the intention might have been to treat this case as if the attribute was not there. (Of course, this approach could be based on a misconception of .+? as well, and this appears to be a case where someone tries to parse XML with regular expressions – not a good idea.)

Collectives™ on Stack Overflow

What does this line of Javascript Regex do?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related