在项目中碰到一个问题,就是JavaScript拼接html标签时,里面特殊字符会有些问题,比如单引号截断配对,导致后面的内容不显示或显示错误。在此记录一下。
下面贴一段简化的代码,若有描述不清的地方还请各位指正,共同进步。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <div style="height: 300px; width: 520px; border: 1px solid gray;"> 8 <label id="content"> </label> 9 <p>title值</p> 10 11 <div style="height: 100px; width: 520px; border: 1px solid red;"> 12 <label id="contentRight"></label> 13 <p>正确的<br />title </p> 14 </div> 15 16 <label id="contentError"></label> 17 <p>错误的<br />title </p> 18 </div> 19 <script src="jquery-1.7.2.min.js"></script> 20 <script src="encodeF.js"></script> 21 </body> 22 </html>
用的的js文件也很简单,见下面代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 $(function() 2 { 3 ////拼接字符串值。 4 var value="~!@#$%^&*()_+`-=[]{};'\:\"|,./<>?"; 5 ////存储div原来的内容,以便后期处理,此处我们只是显示拼接字符串的值。 6 var oldStr; 7 ////加转换过的title 8 var rightStr; 9 ////加未处理拼接字符的title 10 var errorStr; 11 12 oldStr=$("#content").html(); 13 oldStr= oldStr+value; 14 rightStr= "<p title='" + escapeHtml(value) + "'>rightStr1</p>" ; 15 errorStr= "<p title='" +value + "'>errorStr1</p>" ; 16 ////显示 17 $("#contentRight").html(rightStr); 18 $("#contentError").html(errorStr); 19 $("#content").html(oldStr); 20 }) 21 ////HTML实体编码:应对特殊字符 22 function escapeHtml(string) { 23 var entityMap = { 24 "&": "&", 25 "<": "<", 26 ">": ">", 27 '"': '"', 28 "'": ''', 29 "\\": '\', 30 "/": '/' 31 }; 32 return String(string).replace(/[&<>\"\'\/]/g, function (s) { 33 return entityMap[s]; 34 }); 35 }
具体效果图见下图,正确输出是左边的rightStr1上的title,右面显示的是截断的title,并导致页面元素显示错误,多出了“ ?'>’ ”这三个字符: