vue中处理后台返回的 html 特殊标签(‘\<； p style=“xxx“ \>；‘)或(\＜p＞)的三种情况

2024-05-29 06:33| 来源: 网络整理| 查看: 265

在平时获取后台数据渲染页面的时候可能会出现后台返回的数据是带有 html 特殊标签的需求是附带的样式也不要, 意思就是直接删掉那些内容但是在网上找挺久都没有找到现成的方法最后是自己找了两个方法拼接出来的所以在这里总结一下方便以后直接 cv

// 返回数据: ret : { list: { "introduct": ';p style="color: lightcoral;";就;当文字就是内容吧。;/p;', } } // 或者 ret : { list: { "introduct": '就当文字就是内容吧。;

', } } 返回数据带有html特殊字符(’;/≤p;’) -> 转成 html标签(

) // 返回数据带有html特殊字符的话直接用 v-html 在页面上显示的是 html标签 {{message}} // 如果需要数据中的样式的可以直接 v-html 指令渲染这个字段就能渲染出来了 dianwo var app = new Vue({ el: '#app', data: { message: ';p style="color: lightcoral;";就;当文字就是内容吧。;/p;' }, methods: { click1() { this.message = this.escapeHtml(this.message) }, // 处理方法 escapeHtml(str) { var arrEntities = { 'lt': '', 'nbsp': ' ', 'amp': '&', 'quot': '"' }; return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { return arrEntities[t]; }); }, } })

在这里插入图片描述

上面这个方法来自：https://blog.csdn.net/weixin_49186680/article/details/108746341

返回数据带有 html标签() -> 把 html标签去掉 // 如果不想要后台返回在数据终的样式的话可以这样处理 {{message}} dianwo var app = new Vue({ el: '#app', data: { message: '就当文字就是内容吧。;' }, methods: { click1() { this.message = this.delHtmlTag(this.message) }, // 处理方法 delHtmlTag(str) { return str.replace(/]+>/g, '').replace(/;/ig, "") } } })

在这里插入图片描述

上面的方法来自：https://blog.csdn.net/weixin_44565191/article/details/109716908

返回数据带有html特殊字符(’;/≤p;’) -> 去掉特殊字符 // 如果返回的带有 html特殊字符都不要结合上面两个方法改吧改吧就能瞒住要求了 {{message}} dianwo var app = new Vue({ el: '#app', data: { message: '就当文字就是;内;容吧' }, methods: { click1() { this.message = this.escapeHtml(this.message) }, // 终极处理方法 escapeHtml(str) { var arrEntities = { 'lt': '', 'amp': '&', 'quot': '"' }; let htmlTag = str.replace(/&(lt|gt|amp|quot);/ig, function(all, t) { return arrEntities[t]; }); // console.log(htmlTag); return htmlTag.replace(/]+>/g, '').replace(/;/ig, "") }, } })

在这里插入图片描述

感谢一下引用的这些大佬的内容还有附上样式要想亲自试试效果的我把样式放这里

.fd { margin: 100px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { margin: 30px 0; display: flex; align-items: center; } .btn { width: 100px; }

【本文地址】

公司简介

联系我们