使用JavaScript搜索当前网页html中的字符串

Question

我目前正在使用Axiom。ai机器人从网页上抓取其他数据，我希望能够使用JavaScript抓取一些不显示数字的数据。

这是我想做的:在当前网页中搜索html类包含以下3个值:

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

在网页中有三种情况发生这种情况。我想为每个实例分配一个字母，并返回所有3的组合。例如，在下面的大块代码中，我们有:

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

我想要return'S'对强,"N">对中性，'W'对弱。所以这个例子应该是' SSW '.

这是上面引用的一大块代码:

<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的JavaScript指南

我不是很熟悉JavaScript，任何帮助都是非常感谢的。提前谢谢。

Answer 1

您可以使用.querySelectorAll(.color-box)来获取每个元素，然后过滤每个元素classList以仅包含您关心的元素，然后将结果映射到每个类的大写首字母:

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>