javascript：从属性参数中提取值

Question

<svg>
  <g id="g1" transform="translate(100 80)"/>
</svg>

<script>
  var tr_value = document.getElementById("g1").getAttribute("transform");
  alert(tr_value);   // result: translate(100 80)      need: 100
</script>

各位专家，告诉我如何获取属性参数的值，以防属性具有多个参数，而它们又具有多个值。在上面的示例中，我想将 100 的值放入变量中。 我真的希望在 Javascript 中有一个漂亮的方法。然后首先想到的是解析文本或正则表达式。

Answer 1

您必须编写一个正则表达式或字符串解析器来执行此操作。

例如.*\((\d*) \d*\)

let tr_value = document.getElementById("g1").getAttribute("transform")
let regex = /.*\((\d*) \d*\)/g
let matches = regex.exec(tr_value)
console.log(matches[1]) // "100"

<svg>
  <g id="g1" transform="translate(100 80)"/>
</svg>

.*\((\d*) \d*\)正则解释：

.* - 任何字符序列
\( - 后跟一个左括号
( - 开始匹配数组的捕获组
\d* - 匹配任何数字序列
) - 结束捕获组
- 后跟空格<br>\d* - 后跟任意数字序列
\) - 后跟右括号

注意：匹配的值将是一个字符串，因此如果这是您的代码所期望的，您可能需要将其转换为数值。