前端各框架怎么解析html字符串

本文探讨了如何在Vue中通过v-html渲染HTML字符串,微信小程序利用rich-text处理带样式的文本,以及React中dangerouslySetInnerHTML属性的安全应用。重点讲解了跨框架处理HTML的技巧和注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. vue

let htmlMsg = '<p>这是一段html字符串</p>'
<div v-html="htmlMsg"></div>

2. 微信小程序

在js中定义:
msg:'<p style="color:red">红色的字</p>'
在wxml中取值,使用rich-text
<rich-text nodes="{{msg}}"></rich-text>

另外,如果后台返回的数据中有换行符,可以通过JSON.stringify查看,应该会显示/n,如果想在代码中实现换行的效果,用 标签即可正确解析换行符及空格
3. react
使用dangerouslySetInnerHTML属性

const msg='<p style="color:red">红色的字</p>'
<div dangerouslySetInnerHTML={{__html:msg}}></div>
这里要注意,这个div只能放这个html解析的内容,不能再在div里写别的内容,否则会报错
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值