I have the fallowing string:

<svg xmlns="" viewBox="0 0 12 18"><title>A</title><path d="M0,18V4A3.83,3.83,0,0,1,1.19,1.18,3.85,3.85,0,0,1,4,0H8a3.81,3.81,0,0,1,2.8,1.19A3.85,3.85,0,0,1,12,4V18H8V10H4v8ZM4,8H8V4A2,2,0,0,0,6,2a1.92,1.92,0,0,0-1.4.59A1.92,1.92,0,0,0,4,4Z"/></svg>

I would like to retrieve value from view box:

"0 0 12 18"

What I have so far:

/"\d\s\d\s\d\d\s\d\d"/

As you can see this does not guarantee that extracted value will be viewBox, plus it does not cover situation when values are not single digit, like so: 123 32 1239 33

I have the fallowing string:

<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 12 18"><title>A</title><path d="M0,18V4A3.83,3.83,0,0,1,1.19,1.18,3.85,3.85,0,0,1,4,0H8a3.81,3.81,0,0,1,2.8,1.19A3.85,3.85,0,0,1,12,4V18H8V10H4v8ZM4,8H8V4A2,2,0,0,0,6,2a1.92,1.92,0,0,0-1.4.59A1.92,1.92,0,0,0,4,4Z"/></svg>

I would like to retrieve value from view box:

"0 0 12 18"

What I have so far:

/"\d\s\d\s\d\d\s\d\d"/

As you can see this does not guarantee that extracted value will be viewBox, plus it does not cover situation when values are not single digit, like so: 123 32 1239 33

• javascript
• regex
• svg

• 3 H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ - don't use regex, use a parser – ctwheels Commented Jan 19, 2018 at 20:54
• @Jan that was way too fast of a response to my ment... – ctwheels Commented Jan 19, 2018 at 20:55
• 1 @ctwheels: Honestly I stopped reading a regex question starting with <.... I did wait for the pony link by you, though :) – Jan Commented Jan 19, 2018 at 20:57
• Thanks but I need to be lib free – Nikola Mitic Commented Jan 19, 2018 at 20:57
• @jan Yeah man! Thanks. – Nikola Mitic Commented Jan 19, 2018 at 20:58

3 Answers 3

You could use https://developer.mozilla/en-US/docs/Web/API/DOMParser since it's not wise to use RegExp on XML / HTML

const myString = `<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 12 18"><title>A</title><path d="M0,18V4A3.83,3.83,0,0,1,1.19,1.18,3.85,3.85,0,0,1,4,0H8a3.81,3.81,0,0,1,2.8,1.19A3.85,3.85,0,0,1,12,4V18H8V10H4v8ZM4,8H8V4A2,2,0,0,0,6,2a1.92,1.92,0,0,0-1.4.59A1.92,1.92,0,0,0,4,4Z"/></svg>`;

const parser = new DOMParser();
const doc = parser.parseFromString(myString, "text/html");

console.log( doc.querySelector("svg").getAttribute("viewBox") ); // "0 0 12 18"

The Why not use RegExp to parse? can be illustrated by the simple fact that DOM is extremely permissive, attributes (i.e: like data-*) are not restrictive on it's content (just think of i.e: data-cont="<b data-cont='<b'></b>"), etc etc... imagine the unsustainable regex nightmare you should write. And you'd never get it right.

Regex ...for the "I know my string, man!" moments:

const myString = `<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 12 18"><title>A</title><path d="M0,18V4A3.83,3.83,0,0,1,1.19,1.18,3.85,3.85,0,0,1,4,0H8a3.81,3.81,0,0,1,2.8,1.19A3.85,3.85,0,0,1,12,4V18H8V10H4v8ZM4,8H8V4A2,2,0,0,0,6,2a1.92,1.92,0,0,0-1.4.59A1.92,1.92,0,0,0,4,4Z"/></svg>`;

const viewBox = (/viewBox="([^"]+)"/.exec(myString)||'')[1] ;
console.log( viewBox )  // "0 0 12 18" or undefined (if not found)

Just use getAttribute and split by whitespaces or ma. According to MDN, it could be whitespaces or ma that separates the values. https://developer.mozilla/en-US/docs/Web/SVG/Attribute/viewBox

    let svg_canvas = document.getElementById('svg_canvas');
    let viewBox = svg_canvas.getAttribute('viewBox');
    let view_box_attr = viewBox.split(' '); //whitespace or ma

    //min-x, min-y, width and height
    //the values are string so need to parse
    let zoom_factor = 1;
    let minx = parseInt(view_box_attr[0]) + zoom_factor;
    let miny = parseInt(view_box_attr[1]) + zoom_factor;
    let width = parseInt(view_box_attr[2])- zoom_factor;
    let height = parseInt(view_box_attr[3]) - zoom_factor;
    let newViewBox =  minx+" "+miny+" "+width+" "+height;
    console.log('old '+viewBox+' new '+newViewBox);
    svg_canvas.setAttribute( 'viewBox', newViewBox);

Of course, you can analyze short and simple XML/HTML/SVG sequences with regular expressions. In your case this could be

viewBox="([^"]+)"

See a demo on regex101. and the following snippet:

var svg = '<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 12 18"><title>A</title><path d="M0,18V4A3.83,3.83,0,0,1,1.19,1.18,3.85,3.85,0,0,1,4,0H8a3.81,3.81,0,0,1,2.8,1.19A3.85,3.85,0,0,1,12,4V18H8V10H4v8ZM4,8H8V4A2,2,0,0,0,6,2a1.92,1.92,0,0,0-1.4.59A1.92,1.92,0,0,0,4,4Z"/></svg>'

var match = svg.match(/viewBox="([^"]+)"/)
console.log(match[1])

However, it is not advisable...