解决v-html渲染HTML标签展⽰信息有误问题
问题描述：
今天测试提了个bug: 说在富⽂本编辑器上编辑了公告内容后，再查看公告的时候，页⾯上展⽰内容格式却乱码了，是有什么格式要求吗？
接收到问题后，我马上进⾏了问题复现：
果然在查看公告内容的时候，出现了HTML⽂本未能正常解析的问题：
查看代码，代码是直接使⽤v-html解析接⼝返回的数据，我改变了⼀下v-html的变量取的是data⾥的htmlStr='<p>这是内容</p>',p标签内的信息却能被正常解析渲染出来。那为什么会乱码呢？
再查看接⼝返回的数据内容：
<p><b>1.这是加粗⽂字</b></p><p><b><font size="6">2.这是加粗⼤号⽂字
</font></b></p><p><font size="5"
color="#ff0000">3.这是红⾊字体</font></p><p><span >4.这是背景⾊为绿⾊的字体</span></p><p><br></p>
原来是后端对前端传过去的HTML结构进⾏了⼀层转义（html编码）处理，直接使⽤v-html⽆法解析成功，展⽰的会是HTML源代码。
解决⽅法：
既然后端对HTML进⾏了转义处理，那么在渲染数据之前，当然要对HTML进⾏反转义（html解码）处理了，才能使⽤v-html正常渲染出html标签。
于是我封装了HTML反转义的⽅法，放⼊项⽬⼯具库中：
HTMLDecode(text) {
var reg = /<[^>]+>/g;
if (st(text)) {
return text;
}
var temp = ateElement('div');
temp.innerHTML = text;
var output = temp.innerText || Content;
temp = null;
return output;
},
在渲染数据之前，先调⽤这个函数，对html进⾏反转义处理
再查看页⾯信息，HTML结构就能正常解析渲染出来了：
反转义后的HTML结构可以被正常解析渲染，问题也就解决啦，可以把bug指回给测试了。
在最后，⼩⼩补充⼀下，我在学习过程中，⽤JS实现HTML转义和反转义的常⽤⽅法总结：
JS实现html转义和反转义主要有两种⽅式：
1.利⽤⽤浏览器内部转换器实现html转义；
2.⽤正则表达式实现html转义；
JS⼯具⽅法总结：
2 /*1.⽤浏览器内部转换器实现html编码（转义）*/
3 htmlEncode:function (html){
4 //1.⾸先动态创建⼀个容器标签元素，如DIV
5 var temp = ateElement ("div");
6 //2.然后将要转换的字符串设置为这个元素的innerText或者textContent
7 (Content != undefined ) ? (Content = html) : (temp.innerText = html);
8 //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
9 var output = temp.innerHTML;
10 temp = null;
11 return output;
12 },
13 /*2.⽤浏览器内部转换器实现html解码（反转义）*/
14 htmlDecode:function (text){
15 //1.⾸先动态创建⼀个容器标签元素，如DIV
16 var temp = ateElement("div");
17 //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，⽕狐，google都⽀持)
18 temp.innerHTML = text;
19 //3.最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。
20 var output = temp.innerText || Content;
21 temp = null;
22 return output;
23 },
24 /*3.⽤正则表达式实现html编码（转义）*/
25 htmlEncodeByRegExp:function (str){
26 var temp = "";
27 if(str.length == 0) return "";
28 temp = place(/&/g,"&");
29 temp = place(/</g,"<");
30 temp = place(/>/g,">");
31 temp = place(/\s/g," ");
32 temp = place(/\'/g,"'");
33 temp = place(/\"/g,""");
34 return temp;
35 },
36 /*4.⽤正则表达式实现html解码（反转义）*/
37 htmlDecodeByRegExp:function (str){
38 var temp = "";
39 if(str.length == 0) return "";
40 temp = place(/&/g,"&");
41 temp = place(/</g,"<");
42 temp = place(/>/g,">");
43 temp = place(/ /g," ");
44 temp = place(/'/g,"\'");
45 temp = place(/"/g,"\"");
46 return temp;
47 },
如何查看html代码
48 /*5.⽤正则表达式实现html编码（转义）（另⼀种写法）*/
49 html2Escape:function(sHtml) {
50 place(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];});
51 },
52 /*6.⽤正则表达式实现html解码（反转义）（另⼀种写法）*/
53 escape2Html:function (str) {
54 var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
55 place(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
56 }
57 };
以上是个⼈的⼀点⼩总结，如有不正之处还请谅解和指正，谢谢！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论