如何在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())

这在react中也有效，但我相信因为next编译服务器端它只是抛出DOMParser is not defined，我试过像html-react-parser这样的包，他们只是将html解析成react元素，然后提供非常有限的功能，我最后的办法是使用正则表达式，但我认为这不是一个好主意。

在这方面有任何帮助都会很好，谢谢

Answer 1

您可以尝试使用node-html-parser组件，因为类似的原因，我在next.js项目中使用了该组件：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，而且还有更多的选项，所以我发现这个选项非常强大。