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* - после любой последовательности цифр c цифр
\) - с закрывающей скобкой

Примечание: соответствующее значение будет строкой, поэтому вам может потребоваться привести ее в цифру c, если это то, чего ожидает ваш код.