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

最新推荐文章于 2024-08-15 11:03:46 发布

小王几pl

最新推荐文章于 2024-08-15 11:03:46 发布

阅读量1w

点赞数 6

分类专栏：渲染/返回数据处理文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_50336155/article/details/116134260

版权

渲染/返回数据处理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

// 返回数据: 
ret : {
	list: {
		"introduct": '&lt;p style="color: lightcoral;"&gt;就&nbsp;当文字就是内容吧。&lt;/p&gt;',
	}
}
// 或者
ret : {
	list: {
		"introduct": '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</p>',
	}
}

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

// 返回数据带有html特殊字符的话直接用 v-html 在页面上显示的是 html标签
<body>
    <div id="app">
        <div class="fd">
            {{message}}
            // 如果需要数据中的样式的可以直接 v-html 指令渲染这个字段就能渲染出来了
            <div class="box" v-html="'v-html: ' + message"></div>
            <button class="btn" @click="click1">dianwo</button>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '&lt;p style="color: lightcoral;"&gt;就&nbsp;当文字就是内容吧。&lt;/p&gt;'
        },
        methods: {
            click1() {
                this.message = this.escapeHtml(this.message)
            },
            // 处理方法
            escapeHtml(str) {
                var arrEntities = {
                    'lt': '<',
                    'gt': '>',
                    'nbsp': ' ',
                    'amp': '&',
                    'quot': '"'
                };
                return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
                    return arrEntities[t];
                });
            },
        }
    })
</script>

在这里插入图片描述

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

返回数据带有 html标签(<span>) -> 把 html标签去掉

// 如果不想要后台返回在数据终的样式的话可以这样处理
<body>
    <div id="app">
        <div class="fd">
            {{message}}
            <div class="box" v-html="'v-html: ' + message"></div>
            <button class="btn" @click="click1">dianwo</button>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</span>'
        },
        methods: {
            click1() {
                this.message = this.delHtmlTag(this.message)
            },
            // 处理方法
            delHtmlTag(str) {
                return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, "")
            }
        }
    })
</script>

在这里插入图片描述

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

返回数据带有html特殊字符(’ /≤p>’) -> 去掉特殊字符

// 如果返回的带有 html特殊字符 都不要 结合上面两个方法 改吧改吧 就能瞒住要求了
<body>
    <div id="app">
        <div class="fd">
            {{message}}
            <div class="box" v-html="'v-html: ' + message"></div>
            <button class="btn" @click="click1">dianwo</button>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '<span style="color: skyblue">就当文字就是&nbsp;内&nbsp;容吧</span>'
        },
        methods: {
            click1() {
                this.message = this.escapeHtml(this.message)
            },
            // 终极 处理方法
            escapeHtml(str) {
                var arrEntities = {
                    'lt': '<',
                    'gt': '>',
                    '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(/&nbsp;/ig, "")
            },
        }
    })
</script>

在这里插入图片描述

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

.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;
}