Using JavaScript to search current webpage html for strings

Question

I am currently using an Axiom.ai bot to scrape other data from a webpage, and I would like to be able to use JavaScript to scrape some data that is not displayed numerically.

This is what I’d like to do: Search the current webpage for html classes that contain the following 3 values:

color-box weak bold
color-box neutral bold
color-box strong bold

There are 3 instances where this occurs within the webpage. I’d like to assign a letter to each instance and return the combination of all 3. For example in the large block of code below we have:

color-box strong bold
color-box strong bold
color-box weak bold

I’d like to return 'S' for strong, 'N' for neutral, and 'W' for weak. So this example would be ‘SSW’.

Here's the large block of code referenced above:

<div _ngcontent-run-c70="" class="analysis-items">
<div _ngcontent-run-c70="" class="term shortTerm">
<div _ngcontent-run-c70="">
<span _ngcontent-run-c70="" class="bold">Short-Term sentiment</span><span _ngcontent-run-c70="">2 weeks to 6 weeks</span></div>
<div _ngcontent-run-c70="">
<div _ngcontent-run-c70="" class="color-box muted">weak</div>
<div _ngcontent-run-c70="" class="color-box muted">neutral</div>
<div _ngcontent-run-c70="" class="color-box strong bold">strong</div>
</div>
</div>
<!---->
<div _ngcontent-run-c70="" class="term midTerm">
<div _ngcontent-run-c70="">
<span _ngcontent-run-c70="" class="bold">Mid-Term sentiment</span>
<span _ngcontent-run-c70="">6 weeks to 9 months</span>
</div>
<div _ngcontent-run-c70="">
<div _ngcontent-run-c70="" class="color-box muted">weak</div>
<div _ngcontent-run-c70="" class="color-box muted">neutral</div>
<div _ngcontent-run-c70="" class="color-box strong bold">strong</div>

</div>
</div>
<!---->
<div _ngcontent-run-c70="" class="term longTerm">
<div _ngcontent-run-c70="">
<span _ngcontent-run-c70="" class="bold">Long-Term sentiment</span>
<span _ngcontent-run-c70="">9 months to 2 years</span>
</div>
<div _ngcontent-run-c70="">
<div _ngcontent-run-c70="" class="color-box weak bold">weak</div>
<div _ngcontent-run-c70="" class="color-box muted">neutral</div>
<div _ngcontent-run-c70="" class="color-box muted">strong</div>
</div>
</div>
<!---->
</div>

Axiom's JavaScript guide

I am not very familiar with JavaScript, and any help is greatly appreciated. Thanks in advance.

dave · Accepted Answer · 2022-11-17 17:28:13Z

You could use .querySelectorAll(.color-box) to get each element, then filter each elements classList to only include the ones you care about, then map the result to the uppercase first letter of each of those classes:

const result = Array.from(document.querySelectorAll('.color-box')).flatMap((el) => {
    return Array.from(el.classList).filter(c => ['strong', 'neutral', 'weak'].includes(c));
}).filter(el => el.length).map(el => el.slice(0,1).toUpperCase());

console.log(result)

<div _ngcontent-run-c70="" class="analysis-items">
<div _ngcontent-run-c70="" class="term shortTerm">
<div _ngcontent-run-c70="">
<span _ngcontent-run-c70="" class="bold">Short-Term sentiment</span><span _ngcontent-run-c70="">2 weeks to 6 weeks</span></div>
<div _ngcontent-run-c70="">
<div _ngcontent-run-c70="" class="color-box muted">weak</div>
<div _ngcontent-run-c70="" class="color-box muted">neutral</div>
<div _ngcontent-run-c70="" class="color-box strong bold">strong</div>
</div>
</div>
<!---->
<div _ngcontent-run-c70="" class="term midTerm">
<div _ngcontent-run-c70="">
<span _ngcontent-run-c70="" class="bold">Mid-Term sentiment</span>
<span _ngcontent-run-c70="">6 weeks to 9 months</span>
</div>
<div _ngcontent-run-c70="">
<div _ngcontent-run-c70="" class="color-box muted">weak</div>
<div _ngcontent-run-c70="" class="color-box muted">neutral</div>
<div _ngcontent-run-c70="" class="color-box strong bold">strong</div>

</div>
</div>
<!---->
<div _ngcontent-run-c70="" class="term longTerm">
<div _ngcontent-run-c70="">
<span _ngcontent-run-c70="" class="bold">Long-Term sentiment</span>
<span _ngcontent-run-c70="">9 months to 2 years</span>
</div>
<div _ngcontent-run-c70="">
<div _ngcontent-run-c70="" class="color-box weak bold">weak</div>
<div _ngcontent-run-c70="" class="color-box muted">neutral</div>
<div _ngcontent-run-c70="" class="color-box muted">strong</div>
</div>
</div>
<!---->
</div>

Collectives™ on Stack Overflow

Using JavaScript to search current webpage html for strings

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related