Получить значение элемента html

Question

На сайте есть див, который либо содержит картинку, либо нет. И внутри дива есть текст "x " -- а дальше количество (которое нужно как-то достать оттуда).

Пример кода с img:

<div class="fixed-class">
<img src="https://site.com/randomimage.svg" class="fixed-class2">
"x "
"1"
</div>

Пример кода без img:

<div class="fixed-class">
"x "
"150"
</div>

Нужно с помощью JavaScript получить количество (в примерах это 1 или 150). Название классов фиксированное, его можно использовать.

Пробовал что-то такого типа:

var quantity = document.querySelectorAll(".fixed-class:last-of-type"); //пытался получить значения последнего элемента
alert (quantity); // [object NodeList]
if (quantity)
var totalQuantity = Number(quantity.innerHTML); //пытался привести значение элемента к числу
alert (totalQuantity); // NaN

Выходит какая-то ерунда. Посоветуйте, как тут лучше выкрутиться?

Answer 1

Как пример

let fixed = document.querySelectorAll('.fixed-class');

fixed.forEach(function(e,i) {
  let num = e.innerHTML.match(/(?!<)"(\d+)"(?!>)/gim)[0];
  num = num != null ? Number(num.replace(/("|')/g, '')) : num;
  console.info(num, typeof num)
});

<div class="fixed-class">
"x "
"150"
</div>

<div class="fixed-class">
<img src="">
"123"
</div>

<div class="fixed-class">
<img src="" width="123">
"32"
</div>

Answer 2

При той структуре, которая заявлена в вопросе, можно просто получить текст, удалить из него все "НЕ цифры" (\D) и преобразовать в число:

let quantity = document.querySelectorAll('.fixed-class');

quantity.forEach(function(el) {
  let totalQuantity = parseFloat(el.textContent.replace(/\D/g, ''));
  console.info(totalQuantity)
});

<div class="fixed-class">
<img src="https://site.com/randomimage.svg" class="fixed-class2">
"x "
"1"
</div>

<div class="fixed-class">
"x "
"150"
</div>

БЛОГ НА HUSL

Получить значение элемента html

Ответы (2 шт):