CODEWITHSUNDEEP
javascriptnode.js
user13054316
user13054316

Reputation:

Get textContent inside selected elements

I have the output bellow from a document.querySelector.innerHTML then pushing inside an array. I would like to filter only the numbers inside . Removing everything and just show me the numbers.

Code:

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}
})

});

Actual Output

{
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'
}

Desired Output

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

Upvotes: 1

Views: 67

Answers (2)

vbrin27
vbrin27

Reputation: 991

Instead of using innerHTML, you can loop through the children and get the text.

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>

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

Use querySelectorAll method and forEach to store all span with class ok and 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>

Upvotes: 1

Related Questions