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* - 匹配任何数字序列
) - 结束捕获组
</code> - 后跟 space<br> <code>\d* - 后跟任何数字序列
\) - 后跟右括号

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

javascript: 从属性参数中提取值

javascript: extract value from attribute parameter

javascript

getattribute