【一天一道兼容性】之——IE6、7、8中的空格、折行

demo1:

1 <p id="p"> 123</p> <!--1之前有个半角空格-->
2 <script>
3      var p = document.getElementById("p");
4      alert(p.innerHTML.length)  //IE6、7、8弹出3，忽略了空格     标准浏览器弹出4 没有忽略空格
5 </script>

解析1：

1 alert(p.innerHTML.charAt(0) == "\u0020")  //IE6、7、8的charAt(0)为1     标准浏览器的charAt(0)为"\u0020"

 

demo2:

1 <p id="p">
2         123</p>     <!--1之前添加一个回车-->
3 <script>
4      var p = document.getElementById("p");
5      alert(p.innerHTML.length)  //IE6、7、8依然是3   标准浏览器：12
6 </script>

解析2：

1 alert(p.innerHTML.charAt(0)=="\u0020") //标准浏览器:false
2 alert(p.innerHTML.charAt(0)=="\n")     //标准浏览器:true
3 alert(p.innerHTML.charAt(1)=="\u0020") //标准浏览器:true
4                          .                         true
5                          .                         true
6                          .                         true
7 alert(p.innerHTML.charAt(8)=="\u0020") //标准浏览器:true

demo3:

1 <p id="p">
2         123   <!--前后两次回车-->
3 </p>
4 <script>
5      var p = document.getElementById("p");
6      alert(p.innerHTML.length) //IE6、7、8弹出4   标准浏览器：17
7 </script>

解析3：

1 alert(p.innerHTML.charAt(3)=="\n")       //IE6、7、8：false
2 alert(p.innerHTML.charAt(3)=="\r")       //IE6、7、8：false
3 alert(p.innerHTML.charAt(3)=="\u3000")   //IE6、7、8：false
4 alert(p.innerHTML.charAt(3)=="\u0020")   //IE6、7、8：true

 

总结：不同编辑器，不同的模板会产生不同的折行或者空格，所以用childNodes会比较麻烦

建议解决方法：

1 p.innerHTML.replace(/\n+|\r+|\u0020\|\u3000/g,"");

 

posted on 2013-04-15 00:59  _xiaoMo_  阅读(385)  评论(3)  编辑  收藏  举报

导航