vue v-html 处理后台返回的不规则特殊符号 html

随笔写

于 2024-08-15 11:03:46 发布

阅读量392

点赞数 11

分类专栏：日积月累_前端文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/weixin_50559423/article/details/141215753

版权

日积月累_前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

有时候会遇到后台直接返回 html 标签，但是是一些不规则的特殊符号。eg：(‘\<； p style=“xxx“ \>；‘)或(\＜p＞) 等。这里直接使用 replace 及配合正则方法去解决。下面介绍三种不规则 html 标签处理。废话不多说，直接上代码（这里说明一下，以下内容是由其它文章获取，尊重原创）。

首先我们先看返回的不规则数据内容：

// 返回数据: 
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: '<p style="color: lightcoral;">就 当文字就是内容吧。</p>'
	        },
	        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>

在这里插入图片描述

案例二：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: '就当文字就是内容吧。 '
        },
        methods: {
            click1() {
                this.message = this.delHtmlTag(this.message)
            },
            // 处理方法
            delHtmlTag(str) {
                return str.replace(/<[^>]+>/g, '').replace(/ /ig, "")
            }
        }
    })
</script>

在这里插入图片描述

案例三：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: '就当文字就是 内 容吧'
        },
        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(/ /ig, "")
            },
        }
    })
</script>