JavaScript拼接html字符串时截断问题

　　在项目中碰到一个问题，就是JavaScript拼接html标签时，里面特殊字符会有些问题，比如单引号截断配对，导致后面的内容不显示或显示错误。在此记录一下。

　　下面贴一段简化的代码，若有描述不清的地方还请各位指正，共同进步。

 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>
html

用的的js文件也很简单，见下面代码：

 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         "&": "&amp;",
25         "<": "&lt;",
26         ">": "&gt;",
27         '"': '&#34;',
28         "'": '&#39;',
29         "\\": '&#92;',
30         "/": '&#x2F;'
31     };
32     return String(string).replace(/[&<>\"\'\/]/g, function (s) {
33         return entityMap[s];
34     });
35 }
encodeF.js

具体效果图见下图，正确输出是左边的rightStr1上的title，右面显示的是截断的title，并导致页面元素显示错误，多出了“ ?'>’ ”这三个字符：

 

posted @ 2016-12-07 17:47  尘世书童  阅读(1410)  评论(0)    收藏  举报