如何防止格式错误的html在SSR渲染反应项目中破坏DOM？

Question

我正在尝试呈现内容创建者提供的内容。有些内容格式错误，破坏了DOM。例如，内容包括未关闭的标记和其他我还找不到的原因。我应该实现格式错误的内容不会影响DOM树的其他部分。我使用SSR来呈现内容，所以我应该在服务器端找到一个解决方案。你有糖吗？

我尝试使用影子DOM，但服务器端不支持它。

另外，纠正这个html页面并防止添加格式错误的html也是可行的解决方案，您也有任何建议来验证html吗？

Answer 1

为了防止格式错误的HTML破坏DOM树，一种解决方案是使用能够处理无效HTML并从错误中恢复的解析器。其中一个解析器是来自HTML5 Parser库的html5lib。此解析器可以处理范围广泛的无效HTML并从错误中恢复，因此生成的DOM树仍然具有良好的格式，并且可以正确地呈现。

下面是如何使用HTML5 Parser解析和呈现格式错误的HTML内容的示例：

import React from "react";
import { parse as parseHtml } from "html5lib";
import { renderToString as render } from "react-dom/server";

const MyContent = ({ content }) => {
  const dom = parseHtml(content, { tree: true });
  return <div>{render(dom)}</div>;
};

在本例中，我们使用来自parseHtml库的html5lib函数来解析给定的内容并创建DOM树。然后，我们使用来自renderToString的react-dom/server函数将DOM树转换为可以通过在服务器上进行反应而呈现的一串HTML。

另一种解决方案是使用像cheerio这样的库来解析HTML内容并在呈现之前清理它。cheerio是核心jQuery API的一个快速、灵活和精益的实现，可用于操纵和解析服务器上的jQuery内容。下面是一个示例，说明如何使用cheerio在使用React呈现之前清除格式错误的HTML：

import React from "react";
import cheerio from "cheerio";
import { renderToString as render } from "react-dom/server";

const MyContent = ({ content }) => {
  const $ = cheerio.load(content);
  // Use cheerio to manipulate and clean up the HTML content
  // ...
  const html = $.html();
  return <div>{render(html)}</div>;
};