NodeJS - 解析 HTML 并多次查找某些字符串答案

【问题标题】：NodeJS - Parse HTML and find certain strings multiple timesNodeJS - 解析 HTML 并多次查找某些字符串
【发布时间】：2020-04-02 07:25:06
【问题描述】：

我正在使用 puppeteer 加载网站，然后使用以下方式存储该网站的 HTML：

html = await page.evaluate('new XMLSerializer().serializeToString(document.doctype) + document.documentElement.outerHTML');

这可以正常工作并按预期返回 html（不能在此站点上使用请求，长话短说）。

我现在需要做的是在 HTML 中有一个如下所示的块：

<ul class="styled-radio">
<li>
<input type="radio" name="variant_id" id="variant_id_118018" value="118018">
<label for="variant_id_118018">5</label>
</li>
<li>
<input type="radio" name="variant_id" id="variant_id_118019" value="118019">
<label for="variant_id_118019">6</label>
</li>
<li>
<input type="radio" name="variant_id" id="variant_id_118020" value="118020">
<label for="variant_id_118020">6,5</label>
</li>
... keeps going ...
</ul>

对于每个 variant_id_xxxxxx，我需要获取 xxxxxx 数值以及标签内部文本，然后将其存储为 xxxxxx:innerTextHere

例如，对于上面该文本块中的第一个，它将是 118018:5

如果我们可以将所有 xxxxxx:innerTextHere 值存储在数组 sizes 中，那也很棒，所以上面 html 的最终结果将是 [118018:5, 118019:6, 118020 :6,5]

提前致谢:)

【问题讨论】：

标签： javascript node.js html-parsing

【解决方案1】：

您可以使用节点包Cherrio 来实现上述结果。请参考示例代码。

const cheerio = require('cheerio')

const data = `
<ul class="styled-radio">
<li>
<input type="radio" name="variant_id" id="variant_id_118018" value="118018">
<label for="variant_id_118018">5</label>
</li>
<li>
<input type="radio" name="variant_id" id="variant_id_118019" value="118019">
<label for="variant_id_118019">6</label>
</li>
<li>
<input type="radio" name="variant_id" id="variant_id_118020" value="118020">
<label for="variant_id_118020">6,5</label>
</li>
... keeps going ...
</ul>`;

const result = [];

const $ = cheerio.load(data);

const variants = $("input[name='variant_id']");

variants.each((index, { attribs }) => {
    const { id, value } = attribs;
    const label = $("label[for='" + id + "']");
    result.push({
        id,
        value,
        label: label.text()
    })
})


console.log(result);

【讨论】：