使用正则表达式从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非常宽松的简单事实来说明 ，DOM（即像data-* ）对其内容没有限制（只想想一下： data-cont="<b data-cont='<b'></b>" ），等等...想象一下您应该写的不可持续的正则表达式梦night。 而且您永远都做不到。

正则表达式 ...对于“我知道我的弦，伙计！” 时刻：

 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

当然，您可以使用正则表达式分析简短的XML/HTML/SVG序列。 在您的情况下，这可能是

viewBox="([^"]+)"

请参阅regex101.com上的演示和以下代码片段：

 var svg = '<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>' var match = svg.match(/viewBox="([^"]+)"/) console.log(match[1]) 

但是，不建议...