如何在 next.js 中使用 DOMParser？

Question

我想操作一个 html 字符串，在 vanillaJS 中我会这样做：

  let HTMLString = '<p>hello</p>
                            <style> 
                             p{
                               color:black
                              }
                            <p>world</p>
                             '
    const parser = new DOMParser();
    const doc = parser.parseFromString(HTMLString, "text/html");
    doc.querySelectorAll('style').forEach(item => item.remove())

这也适用于反应，但我相信，由于下一步编译服务器端，它只会抛出DOMParser is not defined，我尝试过像这样的包html-react-parser，它们只是将html解析为反应元素，然后提供非常有限的功能，我最后的手段是使用正则表达式，但我认为这不是一个好主意。

任何帮助都会很好，谢谢

Answer 1

您可以尝试我在 next.js 项目中出于类似原因使用的 node-html-parser 组件： https: //www.npmjs.com/package/node-html-parser

这个想法是在 getStaticProps() 函数的服务器端使用它，如下所示：

import { parse } from 'node-html-parser';

const root = parse('<ul id="list"><li>Hello World</li></ul>');
console.log(root.querySelector('#list'));

正如你所看到的，你可以使用标准 ES6 查询选择器遍历这个虚拟生成的 dom，而且还有更多选项，所以我发现这个选项非常强大。