vue----数据转义,直接用v-html实现不了,filter

2020-07-21  本文已影响0人  默色留恋

之前遇到一个项目,后台返回的数据是如下

"详情请点击 <a href="http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml" target="_blank">http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml</a>"

但是需要在前台的页面显示转义后的

用过v-html和filters过滤,但是都不可以

<div v-html="contentData.content"></div>
<div>{{contentData.content|unEscapeHTML}}</div> 

filters: {
    unEscapeHTML:function (html) {
        html = "" + html;
        return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
    }
                    
},

//都会显示成
详情请点击 <a href="http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml" target="_blank">http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml</a>

想到的解决办法就是在v-html里面调用方法,在方法中进行一次转义

<div v-html="unEscapeHTML(contentData.content)"></div>

 methods:{
    unEscapeHTML(html) {
        html= "" +html;
        return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
    }
}
 //页面中显示
详情请点击 [http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml](http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml)
上一篇 下一篇

猜你喜欢

热点阅读