如何在 next.js 中使用 DOMParser?

IT技术 javascript reactjs dom next.js domparser
2022-07-28 01:43:05

我想操作一个 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,但我相信因为下一个编译服务器端它只是抛出DOMParser is not defined,我尝试过像这样的包html-react-parser,他们只是将 html 解析为react元素并提供非常有限的功能,我最后的手段是为此使用正则表达式,但我认为这不是一个好主意。

任何帮助都会很好,谢谢

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,而且还有更多的选项,所以我发现这个非常强大。