在平時獲取后臺數據渲染頁面的時候可能會出現后臺返回的數據是帶有 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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
