html標簽反轉義

情景是這樣的（小程序或vue下）：

優惠活動的詳情頁是通過從數據庫拿到數據動態生成的，數據庫返回的頁面結構數據content：

"<div class='cont-part'><div class='cont-title'></div><div class='cont-image'><img src='http://img.域名隱身之術.cn/524/20191117170216250.png' ></div></div><div class='cont-part'><div class='cont-title'></div><div class='cont-image'><img src='http://img.域名隱身之術.cn/524/20191117170216309.jpg' ></div></div><div class='cont-part'><div class='cont-title'></div><div class='cont-image'><img src='http://img.域名隱身之術.cn/524/20191117170216335.png' ></div></div><div class='cont-part'><div class='cont-title'></div><div class='cont-image'><img src='http://img.域名隱身之術.cn/524/20191117170217306.png' ></div></div>"

結構並不復雜，無非是標題、內容、圖片三個部分，那么如何把這段數據轉義成html顯示在頁面中呢？如下。

 

首先 在js中封裝好反轉義相關方法：

const escapeHtml = str => { // HTML 標簽反轉義
    var arrEntities = {
        'lt': '<',
        'gt': '>',
        'nbsp': ' ',
        'amp': '&',
        'quot': '"',
    };
    return str.replace( /&(lt|gt|nbsp|amp|quot);/ig, function ( all, t ) {
        return arrEntities[ t ];
    } );
}

const UnicodeToAscii = ( content ) => { // Unicode 轉換 ASCII
    let contentCopy = content.replace(/&amp;/ig,'&');
    let code = contentCopy.match( /&#(\d+);/g ),
        result = '';
    if ( code && code.length > 0 ) {
        for ( var i = 0; i < code.length; i++ ) {
            let asciiStr = String.fromCharCode( code[ i ].replace( /[&#;]/g, '' ) );
            result = contentCopy.replace( new RegExp( code[ i ], 'g' ), asciiStr );
        }
        return result;
    } else {
        return contentCopy;
    }
}

 

然后 在接口返回數據的地方調用方法：

　　由於uniapp中不支持div、p、img等標簽，所以要用到replace方法為標簽增加同名類名；

　　'要替換成單引號 '

 

this.activityBody = res.data.body;
this.activityBody.htmlContent = this.tools
    .UnicodeToAscii(this.tools.escapeHtml(this.activityBody.content))
    .replace(/'/gi, "'")
    .replace(/<p/gi, '<p class="_p"')
    .replace(/ <img/gi, '<img class="_img"')
    .replace(/<table/gi, '<table class="_table"');

 

最后 通過v-html在結構中使用轉義后的content：

<div class="content">
    <h1> 標題 </h1>
    <div class="line"><span>我是一條線</span></div>
    <div v-html="Body.htmlContent"></div>
</div>

 

此處效果自行感受...