Получить textContent внутри выбранных элементов

Question

У меня есть результат ниже из document.querySelector.inner HTML, затем вставляем внутрь массива. Я хочу фильтровать только числа внутри. Удалите все и просто покажите мне числа.

Код:

const games = await page.evaluate(() => {
                
return [].concat.apply([], document.querySelectorAll('#content-wrapper'))
               
.map((e) => {
const numbers = [];
for(let i = 1; i <= 10; i++) {
const bets = e.querySelector('#content-wrapper > div > div:nth-child(5) > iv:nth-child('+i+')').innerHTML;
numbers.push({ bets })
}
return {numbers}
})

});

Фактический результат

{
numbers: '<h4 style="">List 100 </h4>\n' +
'<span>1</span>\n' +
'\n'
'<span>2</span>\n' +
'\n'
'<span class="ok">3</span>\n' +
'\n'
'<span class="ok">4</span>\n' +
'\n'
'<span>5</span>\n' +
'\n'
'<span class="ok">6</span>\n' +
\n'
'<span>7</span>\n' +
'\n'
'<span class="ok">8</span>\n' +
'\n'
'<span class="ok">9</span>\n' +
'\n'
'<span class="ok">10</span>\n' +
'\n'
}

Желаемый результат

{
List 100,
3,
4,
6,
8,
9,
10
}

Answer 1

Используйте метод querySelectorAll и forEach для хранения всех span с классом ok и h4 - textContent

//Get all elements with class ok
let children = document.querySelectorAll('.ok, h4')

//Store data
let store = []

//Foreach data
children.forEach(data => store.push(data.textContent.trim()))

//Console.log
console.log(store)

<div id=container>
  <h4 style="">List 100 </h4>
  <span>1</span>
  <span>2</span>
  <span class="ok">3</span>
  <span class="ok">4</span>
  <span>5</span>
  <span class="ok">6</span>
  <span>7</span>
  <span class="ok">8</span>
  <span class="ok">9</span>
  <span class="ok">10</span>
</div>

Answer 2

Вместо использования inner HTML, вы можете l oop через дочерние элементы и получить текст.

function extractnumbers(){
  let children = document.getElementById('container').querySelectorAll('h4,.ok');
  let numbers = [...children].map((node)=> node.textContent.trim());
  console.log(numbers);
}

<div id=container>
  <h4 style="">List 100 </h4>
  <span>1</span>
  <span>2</span>
  <span class="ok">3</span>
  <span class="ok">4</span>
  <span>5</span>
  <span class="ok">6</span>
  <span>7</span>
  <span class="ok">8</span>
  <span class="ok">9</span>
  <span class="ok">10</span>
</div>
<br><br>
<button onclick='extractnumbers()'> Extract Numbers</button>

<h4> The output is printed in console.</h4>