在平时获取后台数据渲染页面的时候可能会出现后台返回的数据是带有 html 特殊标签的
需求是附带的样式也不要, 意思就是直接删掉那些内容
但是在网上找挺久都没有找到现成的方法 最后是自己找了两个方法拼接出来的 所以在这里总结一下 方便以后直接 cv
ret : { list: { "introduct": '<p style="color: lightcoral;">就 当文字就是内容吧。</p>', } } ret : { list: { "introduct": '<span style="color: skyblue">就当文字就是内容吧。 </p>', } }
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
返回数据带有html特殊字符(’ /≤p>’) -> 转成 html标签(<p>)
<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: '<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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
上面这个方法来自: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">就当文字就是内容吧。 </span>' }, methods: { click1() { this.message = this.delHtmlTag(this.message) }, delHtmlTag(str) { return str.replace(/<[^>]+>/g, '').replace(/ /ig, "") } } }) </script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
上面的方法来自:https://blog.csdn.net/weixin_44565191/article/details/109716908
返回数据带有html特殊字符(’ /≤p>’) -> 去掉特殊字符
<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">就当文字就是 内 容吧</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]; }); return htmlTag.replace(/<[^>]+>/g, '').replace(/ /ig, "") }, } }) </script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
感谢一下引用的这些大佬的内容
还有附上 样式 要想亲自试试效果的我把样式放这里
.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; }
转自:csdn 作者:小王几pl
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务