使用正则表达式从 SVG 字符串中提取 viewBox 属性值

Question

我有以下字符串：

<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>

我想从视图框中检索值：

"0 0 12 18"

到目前为止我所拥有的：

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

正如您所看到的，这并不能保证提取的值将是 viewBox，而且它不涵盖值不是单位数的情况，如下所示： 123 32 1239 33

Answer 1

您可以使用https://developer.mozilla.org/en-US/docs/Web/API/DOMParser因为在 XML / HTML 上使用 RegExp 并不明智

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"

为什么不使用RegExp来解析呢？可以用这样一个简单的事实来说明：DOM 非常宽松，属性（即： like data-*）对其内容没有限制（只需考虑 ie: data-cont="<b data-cont='<b'></b>"），等等……想象一下您应该编写的不可持续的正则表达式噩梦。而你永远不会做对。

正则表达式... “我知道我的字符串，伙计！” 时刻：

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)