当前位置：首页 > news >正文

HTML字符串转换为React元素实现

news 来源：原创 2025/8/5 6:11:31

HTML字符串安全转换为React元素的实现

一、背景介绍

介绍HTML字符串在Web开发中的常见场景。
说明React中直接使用HTML字符串的局限性。
提出将HTML字符串转换为React元素的需求。

二、首先必备的两个npm库：'html-react-parser'和'dompurify' 导入：

pnpm install html-react-parser dompurify

`三、介绍`

import parser from 'html-react-parser'; 这行代码的作用是从 html-react-parser 库中导入 parser 函数。这个库的主要功能是将 HTML 字符串转换为 React 元素（React nodes），方便在 React 应用中动态渲染 HTML 内容。

具体作用：

将 HTML 字符串转换为 React 元素
- 如果你从 API、数据库或其他地方获取了一段 HTML 字符串（比如 <div>Hello <strong>World</strong></div>），你可以用 parser 将其转换成 React 可以渲染的 JSX 结构。
替代 dangerouslySetInnerHTML
- 在 React 中，直接渲染 HTML 字符串通常需要使用 dangerouslySetInnerHTML，但这可能带来 XSS（跨站脚本攻击）风险。html-react-parser 提供了一种更安全的方式来解析和渲染 HTML。
支持自定义转换规则
- 你可以自定义如何转换特定的 HTML 标签或属性，例如将 <a> 标签替换成 React 组件。

基本用法示例：

import parser from 'html-react-parser';const htmlString = '<div>Hello <strong>World</strong></div>';function MyComponent() {return <div>{parser(htmlString)}</div>;
}

渲染结果会显示：
Hello World（"World" 是加粗的）

替代 `dangerouslySetInnerHTML` 的对比：

// 使用 dangerouslySetInnerHTML（不安全）
<div dangerouslySetInnerHTML={{ __html: htmlString }} />// 使用 html-react-parser（更安全、可控）
<div>{parser(htmlString)}</div>

其他功能：

可以替换特定标签为 React 组件：

parser('<img src="image.jpg">', {replace: (domNode) => {if (domNode.name === 'img') {return <MyImage src={domNode.attribs.src} />;}}
});

过滤或修改属性，防止 XSS。

注意事项：

如果 HTML 来自用户输入，仍需确保内容经过消毒（sanitize），比如配合 DOMPurify 使用。
某些复杂的 HTML 结构（如 SVG 或表格嵌套）可能需要额外处理。

`import DOMPurify from 'dompurify';` 的作用是导入 DOMPurify 库，它是一个专门用于对 HTML 内容进行消毒（Sanitize）的 JavaScript 工具，主要用来防止 XSS（跨站脚本攻击）等安全风险。

DOMPurify 的核心作用

当你的应用需要渲染 用户提交的 HTML（比如富文本编辑器、评论系统、动态消息等），直接使用 innerHTML 或 dangerouslySetInnerHTML 可能会导致恶意代码执行，例如：

<!-- 恶意用户提交的 HTML -->
<div>你好！<script>alert('XSS攻击！');</script>
</div>

如果直接渲染这段代码，<script> 标签会被执行，可能导致 数据窃取、用户劫持等安全问题。

DOMPurify 的作用就是过滤掉这些危险内容，只保留安全的 HTML 标签和属性。

import DOMPurify from 'dompurify';const dirtyHtml = `<div><p>这是一段<b>安全的</b>文本</p><script>alert('XSS!');</script><img src="x" onerror="alert('恶意代码')"></div>
`;// 使用 DOMPurify 清理 HTML
const cleanHtml = DOMPurify.sanitize(dirtyHtml);console.log(cleanHtml);
// 输出：<div><p>这是一段<b>安全的</b>文本</p><img src="x"></div>

关键变化：

<script> 被完全移除。
onerror 等危险属性被删除，只保留 src。
安全的 HTML（如 <p>, <b>）被保留。

常见使用场景

（1）配合 `html-react-parser` 安全渲染 HTML

import DOMPurify from 'dompurify';
import parser from 'html-react-parser';const userInput = '<div onclick="alert(1)">点击我</div>';const safeHtml = DOMPurify.sanitize(userInput);
const reactElements = parser(safeHtml);return <div>{reactElements}</div>;
// 渲染结果：<div>点击我</div>（onclick 被移除，不会触发弹窗）

（2）在 React 中替代 dangerouslySetInnerHTML

// ❌ 不安全的方式
<div dangerouslySetInnerHTML={{ __html: userInput }} />// ✅ 安全的方式
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />

（3）Node.js 后端清洗 HTML

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);const clean = DOMPurify.sanitize(dirtyHtml);

DOMPurify 的过滤规则

DOMPurify 默认允许 常见的安全 HTML 标签（如 <p>, <a>, <img>），但会移除：

<script>, <iframe>, <embed> 等可执行代码
onclick, onerror, href="javascript:..." 等危险属性
style 属性中的危险 CSS（如 expression()）

自定义允许的标签/属性

const cleanHtml = DOMPurify.sanitize(dirtyHtml, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'], // 只允许这些标签ALLOWED_ATTR: ['href', 'title'], // 只允许这些属性
});

与其他安全库的对比

工具	用途	特点
DOMPurify	HTML 消毒（Sanitize）	轻量级，专注于 XSS 防护
xss (npm 包)	HTML 消毒	中文社区常用，类似 DOMPurify
validator.js	通用输入验证	不专门处理 HTML
html-react-parser	HTML → React 转换	需配合 DOMPurify 使用

四、总结

DOMPurify 用于清理 HTML，防止 XSS 攻击。
在渲染用户输入的 HTML 前，务必使用它进行过滤。
可配合 html-react-parser 或 dangerouslySetInnerHTML 安全渲染动态内容。

HTML字符串转换为React元素实现

HTML字符串安全转换为React元素的实现一、背景介绍介绍HTML字符串在Web开发中的常见场景。说明React中直接使用HTML字符串的局限性。提出将HTML字符串转换为React元素的需求。二、首先必备的两个npm库：html-react-parser和dompurify 导入： pnpm i…...

编程日记 2025/8/5 6:11:31

全局异常未能正确捕获到对应的异常

自定义Validation验证器遇到的问题抛出的异常没有能被指定的TaskValidException.class方法拦截到。故写这个原因全局异常拦截只能拦截相同的异常。只能通过解析转入自定义的异常。自定义的异常继承的异常要是一家子的。如TaskValidException和ValidationException。这样就能在…...

编程日记 2025/8/5 5:53:55

LeetCode 解题思路 47（最长回文子串、最长公共子序列）

解题思路： dp 数组的含义： dp[i][j] 是否为回文子串。递推公式： dp[i][j] s.charAt(i) s.charAt(j) && dp[i 1][j - 1]。dp 数组初始化： 单字符 dp[i][i] true，双字符 dp[i][i 1] s.charAt(i) s.charA…...

编程日记 2025/7/31 13:35:35

P11369 [Ynoi2024] 弥留之国的爱丽丝（操作分块，DAG可达性trick）

真的神仙题。感觉学到了很多。题意： 给你一张 n n n 个结点 m m m 条边的有向图，点编号为 1 , 2 , … , n 1,2,\dots,n 1,2,…,n。每条边的颜色为黑色或白色。一开始所有 m m m 条边都是黑色的。你需要进行 q q q 次操作，有两种操作…...

编程日记 2025/7/31 13:35:33

NAT穿越

概述 IPSec协商是通过IKE完成--->ISAKMP协议完成--->由UDP封装，源目端口均为500。 NAT--->NAPT，同时转换IP和端口信息。对端设备会查验收到的数据报文中的源IP和源端口，其中源IP可以设定为NAT转换后的IP，但是源端口无法…...

编程日记 2025/7/31 13:35:31

不黑文化艺术学社首席艺术家孙溟㠭浅析“雪渔派”

孙溟㠭浅析“雪渔派” 何震字主臣 ，长卿，号雪渔，安徽婺源（今江西）人，是明代著名的篆刻家和书法家，与文彭独树一帜，实现书法与刀法的统一。云中白鹤笑谭间气吐霓虹边款其篆刻吸…...

编程日记 2025/7/31 13:35:29

【Linux操作系统】第一弹——Linux基础篇

文章目录 💡 一. Linux的基本常识🪔 1.1 linux网络连接三种方式🪔1.2 虚拟机的克隆🪔1.3 虚拟机的快照🪔1.4 虚拟机的迁移和删除🪔1.5 vmtools工具 💡二. Linux的目录结构🪔2.1 Linu…...

编程日记 2025/7/31 13:35:27

“ES7+ React/Redux/React-Native snippets“常用快捷前缀

请注意，这是一个常用的列表，不是扩展提供的所有前缀。最完整和最新的列表请参考扩展的官方文档或在 VS Code 中查看扩展的详情页面。 React (通常用于 .js, .jsx, .ts, .tsx): rfce: React Functional Component with Export Defaultrafce: React Arro…...

编程日记 2025/7/31 13:35:25

安装好处特点：这个东西不像selenium需要固定版本的驱动 pip config set global.index-url https://mirrors.aliyun.com/pypi/simplepip install --upgrade pippip install playwright playwright installplaywright install ffmpeg (处理音视频的)验证&#x…...

编程日记 2025/7/31 13:35:23

2025年社交APP安全防御指南：抵御DDoS与CC攻击的实战策略

2025年，社交APP的用户规模与业务复杂度持续增长，但随之而来的DDoS与CC攻击也愈发隐蔽和智能化。攻击者通过AI伪造用户行为、劫持物联网设备，甚至利用区块链漏洞发起混合攻击，对平台稳定性与用户数据安全构成严峻挑战。本文将结合最…...

编程日记 2025/7/31 13:35:21

PHP会话技术

第十六章-PHP会话技术 PHP会话技术是构建动态、个性化Web应用的核心机制之一，它通过跟踪用户在网站上的连续操作状态，实现了网页间的数据持久化交互。无论是电商平台的购物车信息保存、社交媒体的用户登录状态维持，还是表单数据的跨页面传递…...

编程日记 2025/7/31 13:35:19

QT聊天项目DAY10

1.封装redis操作类头文件 #ifndef REDISMANAGE_H #define REDISMANAGE_H#include "Singletion.h" #include "GlobalHead.h"class RedisManage : public Singletion<RedisManage> {friend class Singletion<RedisManage>; public:~RedisMana…...

编程日记 2025/8/4 23:21:07

5.0.5 变换(旋转、缩放、扭曲）

WPF变换可以产生特殊效果，如平移、旋转、扭曲。变换类描述TranslateTransform沿着X轴和Y轴平移ScaleTransform 沿着定义的中心点缩放RotateTransform沿着定义的中心点旋转SkewTransform 扭曲元素MatrixTransfrom提供3x3矩阵，用于定义一个自定义变换 1…...

编程日记 2025/7/31 13:35:14

matlab转python

1 matlab2python开源程序 https://blog.csdn.net/qq_43426078/article/details/123384265 2 网址转换网址：https://app.codeconvert.ai/code-converter?inputLangMatlab&outputLangPython 文件比较网址：https://www.diffchecker.com/text-comp…...

编程日记 2025/7/31 13:35:13

什么是直播美颜SDK？跨平台安卓、iOS美颜SDK开发实战详解

时下，尤其在社交、娱乐、电商等应用场景中，一个流畅且效果自然的美颜功能往往能直接影响用户的留存率和平台的营收。要实现这些效果，美颜SDK是核心工具。那么，什么是直播美颜SDK？它的功能有哪些？如何进行跨…...

编程日记 2025/7/30 15:48:31

大尺寸PCB如何重塑通信与新能源产业格局

在5G通信基站与新能源电站的机房内，一块块面积超过600mm600mm的PCB板正悄然推动着技术革命。作为电子设备的核心载体，大尺寸PCB凭借其高密度集成与复杂工艺，成为通信、能源等领域的“隐形功臣”。以猎板PCB为代表的厂商，凭借宽幅曝…...

编程日记 2025/8/4 10:26:45

JavaSE核心知识点02面向对象编程02-04（包和导入）

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 JavaSE核心知识点02面向对象编程02-04&#…...

编程日记 2025/7/31 15:53:26

【漫话机器学习系列】249.Word2Vec自然语言训练模型

【自然语言处理】用 Word2Vec 将词语映射到向量空间详解一、背景介绍在自然语言处理（NLP）领域，我们常常需要将文本信息转化为机器能够理解和处理的形式。传统的方法，如 one-hot编码，虽然简单，但存在严重…...

编程日记 2025/7/31 13:35:06

CSS transition过渡属性

transition 是 CSS 中用于创建平滑动画效果的属性，它允许元素在两个状态之间平滑过渡，而不是立即改变。通过定义过渡的属性、持续时间和速度曲线，你可以实现丰富的交互体验，如悬停效果、状态切换动画等。核心作用平滑过渡&…...

编程日记 2025/8/2 12:38:22

U9C对接飞书审批流完整过程

U9C虽然很强大，但是移动办公和审批流功能并不好用，为了弥补U9C这种不足，很多的企业在使用U9C的同时再开通钉钉、飞书、企业微信这种OA管理系统，两套系统并行使用，就需要考虑U9C和OA系统数据同步的问题，最简…...

编程日记 2025/7/31 13:35:02

阿里云 SLS 多云日志接入最佳实践：链路、成本与高可用性优化

作者：裘文成（翊韬） 摘要随着企业全球化业务的扩展，如何高效、经济且可靠地将分布在海外各地的应用与基础设施日志统一采集至阿里云日志服务 (SLS) 进行分析与监控，已成为关键挑战。本文聚焦于阿里云高性能日志采集…...

编程日记 2025/7/31 13:35:00

从0开始学习大模型--Day04--大模型的框架以及基本元素

Agent框架与策略分析计划与执行（planning-and-Execute） 该框架侧重于先规划一系列的行动，然后执行。这个框架可以使大模型能够先综合考虑任务的多个方面，然后按照计划进行行动，比较适合应用在较复杂的项目管理中或者…...

编程日记 2025/8/3 11:21:38

FPGA实战项目2———多协议通信控制器

1. 多协议通信控制器模块 (multi_protocol_controller) 简要介绍这是整个设计的顶层模块，承担着整合各个子模块的重要任务，是整个系统的核心枢纽。它负责协调 UART、SPI、I2C 等不同通信协议模块以及 DMA 模块的工作，同时处理不同时钟域之间的信号交互，确保各个模块能够…...

编程日记 2025/7/31 13:34:55

strings.Builder 使用详解

目录 1. 官方包 2. 支持版本 3. 官方说明官方示例方法 func (b *Builder) Cap() int func (b *Builder) Grow(n int) func (b *Builder) Len() int func (b *Builder) Reset() func (b *Builder) String() string func (b *Builder) Write(p []byte) (int, error)…...

编程日记 2025/7/31 13:34:52

数巅智能携手北京昇腾创新中心深耕行业大模型应用

当前，AI技术正在加速向各行业深度渗透,成为驱动产业转型和社会经济发展的重要引擎。构建开放协作的AI应用生态体系、推动技术和应用深度融合，已成为行业发展的重要趋势。近日，数巅智能与北京昇腾人工智能计算中心（北京昇腾创新中…...

编程日记 2025/8/5 4:48:23

【嵌入式系统设计师（软考中级）】第二章：嵌入式系统硬件基础知识——⑤电源及电路设计

文章目录 7. 嵌入式系统电源分类及管理7.1 嵌入式系统电源分类7.2 电源管理技术7.3 电源完整性设计 8. 电子电路设计8.1 电子电路设计基础知识8.1.1 电子电路设计原理8.1.2 电子电路设计方法及步骤8.1.3 电子电路可靠性设计 8.2 PCB设计基础知识8.2.1 PCB设计原理8.2.2 PCB设计…...

编程日记 2025/7/31 13:34:48

排序算法-希尔排序

希尔排序是插入排序的改进版，通过将原始数组分成多个子序列进行间隔插入排序，逐步缩小间隔直至为1，最终完成整体排序。它也被称为缩小增量排序。希尔排序步骤选择增量序列（Gap Sequence）：确定一个递减的…...

编程日记 2025/8/2 9:34:38

JAVA继承中变量和方法的存储和方法中访问变量的顺序

一、变量归属与内存位置 static 变量：属于类，只存在一份，保存在方法区（或元空间）。实例变量（非static）：属于对象，每个对象单独一份，保存在堆内存中。二、…...

编程日记 2025/7/31 12:36:54

【PhysUnits】3.3 SI 基础量纲单位（units/base.rs）

一、源码这段代码定义了一系列基础物理量纲的类型别名，并使用标记 trait Canonical 来表示它们是国际单位制（SI）中的基本单位。 use crate::Dimension; use typenum::{P1, Z0};/// 标记特质，表示基础量纲单位 pub trait Canoni…...

编程日记 2025/8/2 10:36:11

stm32F103芯片实现PID算法控制温度例程

目录硬件需求软件需求步骤 1. 配置STM32CubeMX 2. 编写PID控制代码 3. 编译和烧录 4. 测试注意事项要在STM32F103芯片上实现PID算法控制温度，首先需要确保你有一套完整的硬件和软件开发环境。这里，我将给你一个简化的例程，展示如何使用PID控制算法来调节一个假…...

编程日记 2025/7/31 12:36:50

Java学习手册：微服务设计原则

一、单一职责原则每个微服务应该专注于一个特定的业务功能，具有清晰的职责边界。这有助于保持服务的简洁性，降低服务之间的耦合度，提高服务的可维护性和可扩展性。例如，可以将用户管理、订单管理、支付管理等功能分别设计为独立…...

编程日记 2025/7/31 12:36:48

【挑战项目】 --- 微服务编程测评系统（在线OJ系统）（二）

三十二、Swagger介绍&使用官网：https://swagger.io/ 什么是swagger Swagger是一个接口文档生成工具，它可以帮助开发者自动生成接口文档。当项目的接口发生变更时，Swagger可以实时更新文档，确保文档的准确性和时效性。Swagger还内置了测试功能，开发者可以直接在文档中…...

编程日记 2025/7/31 12:36:47

Unity背景随着文字变化而变化

组件结构： 背景（父）需要添加如下两个组件根据具体情况选择第一个组件水平还是垂直，一般垂直用的比较多效果展示： 此时在文本框中改变内容背景图都会随着变化，动态的...

编程日记 2025/7/31 12:36:45

Elasticsearch内存管理与JVM优化：原理剖析与最佳实践

#作者：孙德新文章目录一、Elasticsearch缓存分类1、Node Query Cache：2、Shard Request Cache：3、Fielddata Cache： 三、内存常见的问题案例一案例二案例三案例四四、内参分配最佳实践1、jvm heap分配2、将机器上少于一半的内…...

编程日记 2025/7/31 12:36:43

快速开发-基于Gin框架搭建web应用

一、概述 Go 语言的 Gin 框架是一个用 Go (Golang) 编写的 Web 框架，它旨在提供一种快速、简洁且高效的方式来构建 Web 应用程序。Gin 框架以其高性能和易用性而闻名，非常适合构建 API 服务、Web 服务和其他需要高性能的 Web 应用。二、Gin框架…...

编程日记 2025/7/31 12:36:41

【RAG】RAG系统——langchain 的用法（说人话版与专业版）

说人话版： RAG就是一句话：对数据设置索引，用问题去检索，用llm生成回答首先，做本地知识库注意: py 3.10以上配置环境变量，安装库 load外部数据，存储到本地的一个index里（这是最…...

编程日记 2025/8/1 20:51:49

pycharm无法直接识别wsl

原因是我的2020 无法支持这个版本的wsl 我就换成2024版添加中可以看到 on wsl 如果你想切到自己创建的虚拟环境你在下面这个界面选择conda就好这样就可以切换成你想要的环境了...

编程日记 2025/7/31 12:36:38

数据结构每日一题day17（链表）★★★★★

题目描述：假设有两个按元素值递增次排列的线性表，均以单链表形式存储。请编与算法将这两个单链表归并为一个按元素值依次递减排列的单链表,并要求利用原来两个单链表的结点存放归并后的单链表。算法思想： 1.初始化： 创建一个新…...

编程日记 2025/7/31 12:36:36

遗传算法（GA）

基本原理算法介绍遗传算法（Genetic Algorithm，简称GA）是一种基于自然选择和遗传学原理的搜索和优化技术。它模拟了生物进化过程，通过选择、交叉（重组）和变异等操作，逐步优化问题的解。遗传…...

编程日记 2025/7/31 12:36:34

EPS三维测图软件

EPS三维测图软件EPS2016...

编程日记 2025/8/2 23:22:48

设计模式-命令模式

写在前面 Hello，我是易元，这篇文章是我学习设计模式时的笔记和心得体会。如果其中有错误，欢迎大家留言指正！ 一、什么是命令模式？ 命令模式是行为模式中的一种，通过将请求封装成对象，使开发者可…...

编程日记 2025/8/1 3:48:15

深入理解主从数据库架构与主从复制

目录前言1. 主从数据库概述1.1 什么是主从数据库？1.2 主从数据库的应用场景 2. 主从数据库的工作原理2.1 主从数据库的读写分离2.2 数据同步机制2.3 异步与同步复制模式 3. 主从复制的实现步骤3.1 配置主库3.2 配置从库 4. 主从数据库架构的优缺点4.1 优点4.2 缺点…...

编程日记 2025/7/31 15:53:21

【C】初阶数据结构15 -- 计数排序与稳定性分析

本文主要讲解七大排序算法之外的另一种排序算法 -- 计数排序目录 1 计数排序 1） 算法思想 2） 代码 3） 时间复杂度与空间复杂度分析 （1） 时间复杂度 （2） 空间复杂度 4） 计…...

编程日记 2025/8/4 18:23:56

@PostConstruct @PreDestroy

PostConstruct 是 Java EE（现 Jakarta EE）中的一个注解，用于标记一个方法在对象初始化完成后立即执行。它在 Spring 框架、Java Web 应用等场景中广泛使用，主要用于资源初始化、依赖注入完成后的配置等操作。 1. 基本作用执行时…...

编程日记 2025/7/31 15:53:17

2025数维杯数学建模A题完整限量论文：空中芭蕾——蹦床运动的力学行为分析

2025数维杯数学建模A题完整限量论文：空中芭蕾——蹦床运动的力学行为分析 ，先到先得 A题完整论文https://www.jdmm.cc/file/2712067/ 蹦床（ Trampoline ）是一项运动员利用蹦床的反弹，在空中展示技能技巧的竞技运动&…...

编程日记 2025/7/31 15:53:16

Kubernetes Gateway API 部署详解：从入门到实战

引言在 Kubernetes 中管理网络流量一直是一个复杂而关键的任务。传统的 Ingress API 虽然广泛使用，但其功能有限且扩展性不足。Kubernetes Gateway API 作为新一代标准，提供了更强大的路由控制能力，支持多协议、跨命名空间路由和细粒度的流量管理。本文将带你从零开始部署…...

编程日记 2025/8/3 15:26:58