remarkablemark/html-react-parser

这是什么？

核心功能

• 01将 HTML 字符串转换为可直接在组件中渲染的 React 元素。
• 02同时支持 Node.js 服务端渲染与浏览器端使用。
• 03replace 选项可将匹配的 DOM 节点替换为自定义 React 元素。
• 04transform 选项可在转换后逐个修改元素。
• 05通过 library 选项可替换为 Preact 或自定义 UI 库。
• 06提供 trim 去除空白及 htmlparser2 解析参数设置。

适用场景

• 在 React 应用中渲染来自 CMS 或 Markdown 流程的 HTML 内容。
• 渲染时将内嵌的链接、图片等标签替换为 React 组件。
• 在 Node.js 的 React 应用中对 HTML 片段进行服务端渲染。

快速上手

1. 1

   通过 npm 安装

   npm install html-react-parser --save
2. 2

   导入并解析 HTML 字符串

使用前须知

• !不能防止 XSS 攻击，README 明确说明不会对 HTML 进行净化。
• !不会对无效 HTML 进行净化。
• !htmlparser2 选项仅在服务端（Node.js）生效，在浏览器中无效。

标签

常见问题

html-react-parser 是什么？

将 HTML 字符串转换为 React 元素的解析库，可在 Node.js 与浏览器中使用。 html-react-parser 可将 HTML 字符串解析为一个或多个 React 元素，适合在 React 组件中渲染来自 CMS、数据库或接口的富文本内容，无需使用 dangerouslySetInnerHTML。它同时支持服务端（Node.js）和浏览器端，也提供 UMD 格式的 CDN 引入方式。

html-react-parser 可以免费使用吗？用的什么许可证？

html-react-parser 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

html-react-parser 还在维护吗？

活跃维护中。html-react-parser 最近一次提交是在 2026年11月6日。

html-react-parser 适合用来做什么？

在 React 应用中渲染来自 CMS 或 Markdown 流程的 HTML 内容。 渲染时将内嵌的链接、图片等标签替换为 React 组件。 在 Node.js 的 React 应用中对 HTML 片段进行服务端渲染。

html-react-parser 怎么安装和运行？

通过 npm 安装: npm install html-react-parser --save 导入并解析 HTML 字符串

在哪里获取 html-react-parser？

源代码和安装说明在 GitHub 上：https://github.com/remarkablemark/html-react-parser