如何使用正则表达式解析 svg `viewBox` 属性？ [复制]

Question

我是一个正则表达式初学者，我正在尝试使用 JavaScript 解析 <svg> 元素的 viewBox 属性。

viewBox 属性的规范如下所示：

'viewBox' 属性的值是四个数字的列表 、、 和 ，由空格和/或逗号分隔 https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

所以在我的理解中，一个属性看起来像： viewBox="10 10.2, 80 80" 有效。

我正在尝试构建一个基本上可以做到的正则表达式：

viewBoxString = "10 10.2, 80 80";
[xmin, ymin, width, height] = parseViewBox(viewBoxString);

function parseViewBox(viewBoxString) {...} 长什么样子？

我尝试通过连接我为浮点数和分隔符（可选逗号）找到的正则表达式来构建此函数。但它不会产生匹配...

function parseViewBox(viewBoxString) {
  float=/[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)/
  separator = /,?/
  pattern = float + separator + float + separator + float + separator + float
  return viewBoxString.match(pattern)
}

我想要的输出是：

xmin == 10, 
ymin == 10.2
width == 80
height == 80

但我不知道怎么去那里。任何帮助将不胜感激！

Answer 1

类似的东西呢：

function parseViewBox(viewBoxString, asNumbers = false) {
  let values = viewBoxString.split(/[ ,]/).filter(Boolean); // filter removes empty strings

  return asNumbers ? values.map(Number) : values;
}


let viewBoxString = "10 10.2, 80 80";
let [xmin, ymin, width, height] = parseViewBox(viewBoxString, true);

Answer 2

这可行，但我认为Zim's answer 可能更好。更高效、更易读、需要最少的错误处理，看起来不像是在键盘上吐槽的猫。

const {1: xmin, 2: ymin, 3: width, 4: height} = r.exec(input)

const input = "10 10.2, 80 80";
const r = /(-?[0-9.]+)[\s,]+(-?[0-9.]+)[\s,]+(-?[0-9.]+)[\s,]+(-?[0-9.]+)/gi
const {1: xmin, 2: ymin, 3: width, 4: height} = r.exec(input) || {};

document.querySelector('pre').innerText = `xmin: ${xmin}, ymin: ${ymin}, width: ${width}, height: ${height}`;

<pre></pre>