Extract viewBox attribute value from SVG string using regex

Question

I have the fallowing string:

<svg xmlns="http://www.w3.org/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

Answer 1

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

const myString = `<svg xmlns="http://www.w3.org/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.org/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)

Answer 2

Just use getAttribute and split by whitespaces or comma. According to MDN, it could be whitespaces or comma that separates the values. https://developer.mozilla.org/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 comma

    //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);