Javascript regex. Need to extract value from a SVG string

Question

I have SVG string and I need to extract its two attributes: width and height.

I can't use some XML parser since I am using this with Titanium Studio framework so I don't have DOM anywhere.

SVG's looks like this:

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" width="768" height="1005" space="preserve">
    LOT OF DATA HERE... <></> etc
</svg>

I started with something like this:

var width = svgString.match( /^<svg.\width.=.(.*)$>/gm );

It's 4 AM and my brain is just not working. If someone could help it would be great! Thx.

score 4 · Accepted Answer · answered May 17 '12 at 02:06

4

Assuming jmar777's code works, I would use a different, more conservative, regex, which allows for optional spaces, optional quotes and confirms that values are from svg tag itself (and not from some other tag if absent in svg tag). This might or might not make difference in your case, depending on where you get those svgs and how they are formed.

var width = svgString.match(/^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/)[1];
var height = svgString.match(/^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/)[1];

answered May 17 '12 at 02:06

Eugene Ryabtsev

2,232
1
23
37

Thx, I used yours solution. I'll just modify it a little bit to search `\"` or `\'` if some SVG comes with single quote. Oh and I removed `^` from the beginning since I saw that some SVG's have doctype tag at first. – vale4674 May 17 '12 at 16:35

score 3 · Answer 2 · answered May 17 '12 at 01:59

3

var width = svgString.match(/^<svg.*?width="(\d+)/)[1];
var height = svgString.match(/^<svg.*?height="(\d+)/)[1];

answered May 17 '12 at 01:59

jmar777

38,796
11
66
64

Tnx. I used Eugene's solution which takes care od white spaces also. Yours was a good starting point so I'll up vote your answer – vale4674 May 17 '12 at 16:36

score 0 · Answer 3 · answered May 17 '12 at 02:00

0

Be sure to make optional parts optional. (See: the dots in between the 'width' and the = sign in your regex)

var width = svgString.match( /^<svg.*width\s*=\s*\"(\d*)\"$>/gm );

(given that \s matches all whitespace and \d matches all numbers)

answered May 17 '12 at 02:00

Riking

2,389
1
24
36

Ah! couldn't remember. Fixed it – Riking May 17 '12 at 02:03

score 0 · Answer 4 · answered Sep 01 '18 at 19:20

Here is a solution that worked in all cases i tested.

const width = parseInt(svg.substring(svg.indexOf("width")).split('=')[1].match(/^\d+|\d+\b|\d+(?=\w)/g)[0]);
const height = parseInt(svg.substring(svg.indexOf("height")).split('=')[1].match(/^\d+|\d+\b|\d+(?=\w)/g)[0]);

Javascript regex. Need to extract value from a SVG string

4 Answers4

Linked