javascript - 如何用正则表达式解析svg `viewBox`属性？

Question

这个问题已经有答案了:

How to parse SVG element's viewBox x, y, width and height values? (3 个回答)

已关闭 3 年前。

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

viewBox 的规范属性看起来像:

The value of the ‘viewBox’ attribute is a list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma 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) {...} 是什么意思？看起来像？

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

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