92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

vue中處理后臺返回的 html 特殊標簽(‘\&lt； p style=“xxx“ \&gt；‘)或(\＜p＞)的三種情況

2021-4-27 前端達人

在平時獲取后臺數據渲染頁面的時候可能會出現后臺返回的數據是帶有 html 特殊標簽的
需求是附帶的樣式也不要, 意思就是直接刪掉那些內容
但是在網上找挺久都沒有找到現成的方法最后是自己找了兩個方法拼接出來的所以在這里總結一下方便以后直接 cv

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


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

返回數據帶有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> 


    
        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">就當文字就是內容吧。&nbsp;</span>' }, methods: { click1() { this.message = this.delHtmlTag(this.message) }, // 處理方法 delHtmlTag(str) { return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/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>’) -> 去掉特殊字符

// 如果返回的帶有 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> 


    
        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
    
 
    
        


    

    
        藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務