当遇到乱码v-html解析转化出来含有标签时如何去掉

最新推荐文章于 2024-04-23 10:14:02 发布
最新推荐文章于 2024-04-23 10:14:02 发布
阅读量289 收藏
点赞数 10
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joyous02/article/details/137815727
版权

 

在Vue 3中，如果后端返回的内容出现了乱码，通常是因为字符编码不一致或者没有正确处理。

最早我使用了v-html和正则表达式，使用v-html的时候乱码转化成了标签，可是我们需要的是纯文本，用正则表达式则需要把每个符号都转化 很麻烦。

所以可以使用decodeURIComponent来解决

  1. 确认后端返回的内容编码是否正确，如果是UTF-8，则通常不会出现乱码问题。

  2. 在Vue 3项目中，可以在接收后端数据后，使用JavaScript的decodeURIComponent函数来解码可能存在的编码问题。

  3. 如果乱码问题出现在渲染到DOM中，确保你的Vue模板编码也是UTF-8。以下是一个简单的例子，展示了如何在Vue 3中处理后端返回的乱码内容，并尝试去除字符串中的标签：

这里使用的是vue3的 setup语法  关注红线圈出的地方即可

这样就把乱码解决了

Joyous02
关注
  • 10
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用v-html解决Vue.js渲染中html标签不被解析的问题
10-20
主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。
encodeURIComponent---转换uri编码，防止解析地址出问题
a432qbc的博客
06-14 984
encodeURLComponent
v-html去掉样式正则
qq_45256497的博客
06-09 327
v-html去掉样式
vue中html转义解决提交表单问题
CaseyWei
05-12 541
在项目开发过程中会有textarea文本框输入提交后台，在特殊字符和脚本防注入的处理上，采用html转义的简单方法来解决这个问题。这种能解决一般的脚本注入和表单提交解析问题，复杂验证还需自定义增加转义正则来实现。2、使用htmlDecode来解析后台返回回显的转义后的字符。
Vue 使用v-html后内容未能解析成html解决方法
zediwang的博客
09-06 3430
vue中如果想将HTML的内容绑定到元素里面，可以使用 v-html的属性来进行设置。设置好以后发现页面上还是显示的是HTML源代码，未能解析成HTML显示。将接口中返回的字符替换成对应的HTML标签，然后再使用v-html进行绑定，页面就显示正常了。导致问题的原因是接口返回的数据中未对html的内容做转义，导致页面输出了HTML的代码。理论上我们页面上想显示的是HTML解析后的内容，而实际上页面是将HTML代码输出了。
【前端疑难杂症bug——v-html细节】
最新发布
爪爪爪爪哇的博客
04-23 255
当我使用了v-html渲染普通文本的时候，当传值出现了闭合的尖括号，会被解析成标签。</</
vue v-html中的样式去除
weixin_44593999的博客
09-26 1007
vue v-html中的样式去除 .replace(/<[^>]+>/g, '') //使用正则进行匹配 <span v-html="item.resume.replace(/<[^>]+>/g, '')"></span>
vue 中字符转义，vue HTML标签渲染
ccq的博客
11-08 819
vue v-html 标签渲染 原始渲染
【vue设计与实现】解析器 - 解析文本与解码HTML实体
loyd3的博客
01-15 2176
如上面的代码所示，由于字符
代码转成v-html时去掉标签只展示中英文或数字
西鱼的博客
09-28 514
<div v-html="subStr(content)"></div> //script subStr(str) { return str.replace(/<[^]+>/g, '') } 使用正则将v-html里的标签都替换掉
v-html 解析并插入 html 标签
热门推荐
weixin_41796631的博客
09-21 7万+
1. 双大括号会将数据解释为普通文本，而非 HTML 代码。 &lt;div id="app"&gt; &lt;p id="a"&gt;Using mustaches: {{ rawHtml }}&lt;/p&gt; &lt;p &gt;Using v-html directive: &lt;/p&gt; &lt;/div&gt; &lt;body&a
Vue源码系列讲解——模板编译篇【三】(HTML解析器)
Miller777_的博客
02-13 1589
上篇文章中我们说到，在模板解析阶段主线函数parse中，根据要解析的内容不同会调用不同的解析器，而在三个不同的解析器中最主要的当属HTML解析器，为什么这么说呢？因为HTML解析器主要负责解析出模板字符串中有哪些内容，然后根据不同的内容才能调用其他的解析器以及做相应的处理。那么本篇文章就来介绍一下HTML解析器是如何解析出模板字符串中包含的不同的内容的。本篇文章主要介绍了HTML解析器的工作流程以及工作原理，文章比较长，但是逻辑并不复杂。首先介绍了HTML。
vue 将有html标签的字符串转换为HTML标签
喜大普奔
02-27 3416
将带有标签的字符串，转化为标签
vue html 标签转义
啧⃝啧⃝啧⃝的博客
05-31 611
【代码】vue html 标签转义。
encodeURIComponent()加密、decodeURIComponent()解码及v-html将字符串转换为html
weixin_30711917的博客
11-20 186
1）新闻详情页后台给我的数据是加密之后的，我问了后台，是用encodeURIComponent()加密的，然后我就用对应的方法decodeURIComponent()解密： this.$store.state.news.main =decodeURIComponent(data.FormattedBody)； 2) 然后{{this.$store.state.news.main...
vue 3 中i18n字符串 转义问题
HaSaKing的博客
04-16 1155
本地没有问题，打包就有问题，最后排查是i18n问题，这里记录下。
Vue.js：v-text 和v-html（解析）、v-show和v-if（控制标签显示或隐藏）、Vue指令：v-for（遍历）
qq_58946786的博客
05-09 1667
Vue.js从基础入门到实战5：v-text 和v-html（解析）、v-show和v-if（控制标签显示或隐藏）、Vue指令：v-for（遍历）
html反编译vue,怎样可以vue反编译？
weixin_35437202的博客
06-27 5133
前端小白一枚最近想模仿一款悬赏任务的app，从网上弄到了所谓的源码。后台是php，前端是vue。但是问题是，我打开来看后，只发现一些html、css和javascript的代码，并没有任何的vue代码和文件。但是我是需要vue的代码去学习这款app的前端是怎样写的，这些html和js的代码不是我想要的，百度了一下，好像这些都是打包编译过的代码，所以我想问一下各位大神这个可以还原到原来的vue代码吗...
vue解析字符串带有html标签,Vue解析带html标签的字符串为dom的实例
weixin_42114645的博客
06-11 7366
Vue解析带html标签的字符串为dom的实例1.场景描述如上接口中，content字段：content:"这是内容"需要在网页中现实如下效果：2.解决方法v-htmlv-html可以操作元素中的HTML标签，效果类似于jquery里的 .html()方法，在不安全的页面比如注册或者登陆页面千万不要用这个指令。因为会出现XSS攻击。所以千万不要用。官网提示：在不安全的页面比如注册或者登陆页面千万不...
使用v-html出现乱码
08-10
你在使用 v-html 的过程中遇到了乱码问题，可能是由于字符编码或特殊字符的处理不正确导致的。以下是一些可能的解决方案： 1. 确保你的 HTML 字符串是以正确的编码格式保存的，比如 UTF-8，这样可以支持更广泛的字符范围。你可以使用编辑器或文本编辑工具来检查和修改编码格式。 2. 如果你的 HTML 字符串中包含特殊字符（如 <、>、& 等），确保它们被正确地转义。可以使用实体编码（Entity Encoding）或者 HTML 转义字符（HTML Escape Characters）来代替特殊字符。 3. 在 Vue 模板中使用 v-html 指令时，要注意 XSS（跨站脚本攻击）的安全风险。确保你信任并且经过验证的 HTML 字符串才能使用 v-html，避免动态插入未经处理的用户输入内容。 请尝试以上的解决方案，如果问题仍然存在，请提供更多的代码和错误信息，以便我能够更好地帮助你解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值