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* - 匹配任意数字序列
) - 结束捕获组
- 后跟一个空格
\d* - 后跟任意数字序列
\) - 后跟一个右括号

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