前一篇不知道怎么被博客园给删了,重新补发一个。

 最近在项目中发现一个很诡异的问题,通过js获取cookie时,发现赋给用户name的时候IE9和低于9以下的浏览器对比时获取到的名字不一样,通过调试发现是split方法在解析||时当值为空时就会出现被“吃掉”的问题。

 当我们在开发的过程想要对特定的字符进行分割,首相想到的就是使用split函数,这样是一个效率非常高的方法。但是让人叹息的是该方法虽然可以在Chrome和Firefox正常运作,但是在低版本IE浏览器却无法正常工作,IE9及以上版本都没有问题。split方法是支持正则表达式的,ES中还对它的获取匹配和贪婪模式做了一些定义,低版本IE浏览器尚未兼容上。这些新概念不被兼容是无可厚非的,但是低版本IE甚至连split的基本功能都没兼容好。split方法使用正则表达式时,返回的结果中就会吞掉所有空字符串。下面展示下相同的方法在不同版本IE浏览器下获取到的值: 

  IE8获取的结果:

  

  IE9获取的结果:

  有没有发现区别在哪里?IE8的行为很诡异吧?原本应为9个参数的,可是在IE8中却成为了8个参数,原本为空的值在IE8中直接被饥渴的IE8给吞掉了。于是就研究了下解决方案,和大家分享一下。

  1:如果我们需要同时使用多个字符切字符串又想兼容IE8可以先把需要用于切割的字符replace到同一个字符再执行split。(虽然效率不高)。

  2:如果要用非消耗匹配的正则去分割字符串,而且还想兼容好IE8的话,那就只有另谋出路吧,别想split了。 这里再跟大家分享一种不需要改动原来的代码,只需要在你的代码中添加如下函数,即可解决split函数在IE浏览器下无法使用的问题:

//重写split 用于解决IE7,IE8,IE9的split的兼容性(panda-2016-06-16)
var split;split = split || function (undef) {var nativeSplit = String.prototype.split,compliantExecNpcg = /()??/.exec("")[1] === undef, self;self = function (str, separator, limit) {if (Object.prototype.toString.call(separator) !== "[object RegExp]") {return nativeSplit.call(str, separator, limit);}var output = [],flags = (separator.ignoreCase ? "i" : "") +(separator.multiline ? "m" : "") +(separator.extended ? "x" : "") + // Proposed for ES6(separator.sticky ? "y" : ""), // Firefox 3+lastLastIndex = 0,separator = new RegExp(separator.source, flags + "g"),separator2, match, lastIndex, lastLength;str += ""; if (!compliantExecNpcg) {separator2 = new RegExp("^" + separator.source + "$(?!\\s)", flags);}limit = limit === undef ?-1 >>> 0 : // Math.pow(2, 32) - 1limit >>> 0; // ToUint32(limit)while (match = separator.exec(str)) {lastIndex = match.index + match[0].length;if (lastIndex > lastLastIndex) {output.push(str.slice(lastLastIndex, match.index));if (!compliantExecNpcg && match.length > 1) {match[0].replace(separator2, function () {for (var i = 1; i < arguments.length - 2; i++) {if (arguments[i] === undef) {match[i] = undef;}}});}if (match.length > 1 && match.index < str.length) {Array.prototype.push.apply(output, match.slice(1));}lastLength = match[0].length;lastLastIndex = lastIndex;if (output.length >= limit) {break;}}if (separator.lastIndex === match.index) {separator.lastIndex++;}}if (lastLastIndex === str.length) {if (lastLength || !separator.test("")) {output.push("");}} else {output.push(str.slice(lastLastIndex));}return output.length > limit ? output.slice(0, limit) : output;};String.prototype.split = function (separator, limit) {return self(this, separator, limit);};return self;}();

  希望能对大家有所帮助!

  您的观看将是我最大的动力,您还可观看我其他的博客,写的不好请谅解。谢谢您给予的支持。 博客地址:http://www.cnblogs.com/zhangzhixiong/

转载于:https://www.cnblogs.com/zhangzhixiong/p/5592999.html

split方法在低版本IE浏览器上无法解析的问题相关推荐

  1. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  2. Ajax学习日志(七)—— 解决低版本IE浏览器的缓存问题

    Ajax入门(七) 一.解决低版本IE浏览器的缓存问题 1.1) 低版本IE浏览器的缓存问题及解决方案 1.2)需了解的知识 1.3)在app.js同目录下新建一个txt文件 1.4)在app.js创 ...

  3. jsencrypt.js 兼容低版本IE浏览器(IE9以下)

    jsencrypt.js 兼容低版本IE浏览器(IE9以下) IE5.IE6.IE7.IE8使用jsencrypt.js IE5.IE6.IE7.IE8使用RSA加密 JS使用非对称加密 SCRIPT ...

  4. 如何让低版本IE浏览器支持HTML5和CSS3

    在默认状态下,低版本的IE浏览器是不支持HTML5和CSS3的,很多良好的效果都不能够使用,这不能不说是一种遗憾,为了弥补此种遗憾,因此产生了很多优秀的插件,下面就介绍比较常用的几种. 一.html5 ...

  5. 低版本IE浏览器不支持前端代码修改属性remove()的解决办法

    今天在工作中碰到了低版本IE浏览器不支持对象属性移除(remove)和添加(add)的方法,请教了同事结合在网上找到的资源最后写了这一段代码,完美的解决了一个前端基础问题,在此记录一下,希望可以帮助到 ...

  6. AJAX学习笔记(基本使用,请求参数传递,获取服务端响应,错误处理,低版本IE浏览器缓存问题及解决)

    1. Ajax实现步骤 创建ajax对象 let xhr = new XMLHttpRequest(); 告诉ajax请求地址及请求方式 xhr.open('get','http://www.exam ...

  7. html兼容ie低版本,jquery不兼容低版本ie浏览器怎么办?

    jquery不兼容低版本ie浏览器怎么办? 1.可以使用原生JS或者低版本的Jquery1.x版本.因为Jquery从2.x版本开始已经不再进行IE低版本(IE6.IE7.IE8)的兼容性处理.如果需 ...

  8. 兼容IE低版本的文件上传解决方案

    兼容IE低版本的文件上传解决方案 参考文章: (1)兼容IE低版本的文件上传解决方案 (2)https://www.cnblogs.com/zhou195/p/9253895.html 备忘一下.

  9. 低版本ie浏览器禁用提示

    低版本ie浏览器禁用提示 <!--[if lte IE 10]><script>// 低版本浏览器升级提示var div = document.createElement(&q ...

  10. 浏览器尺寸判断(兼容标准及低版本ie浏览器)

    1.总体思路:先判断浏览器类型,再根据不同浏览器类型用不同方法获取浏览器尺寸: 2.html <!DOCTYPE html> <html><head><met ...

最新文章

  1. Transformer全靠数据堆?那没有数据怎么办?LUT告诉你「冇问题」|AAAI 2021
  2. 云开发太简单了吧!「72变的云开发」有奖征文领三重好礼!
  3. Gh0st 3.6 存在的BUG及修改方法(收集整理)
  4. bcd编辑工具Linux,​快启动pe系统工具之BCD编辑工具各个功能详细介
  5. 音乐、视频播放模式切换实现方案及原理解析(基于vue、vuex、h5 audio)
  6. 什么是 TCC分布式事务
  7. AD教程系列 | 1-认识基本电子元器件、封装和读数
  8. JS屏蔽360浏览器代码
  9. http之httpClient工具类
  10. QT自定义3D图形控件,支持轴拖动。
  11. java jni 傻瓜教程
  12. 64位java没有javaw.exe,2019-01-01 eclipse无法找到javaw.exe怎么处理
  13. 求公共子树(后缀树法)
  14. Executive functions (执行功能)
  15. scroll案例:带有动画的返回顶部
  16. 英文word文件怎样全篇翻译成中文?
  17. java毕业生设计眼科医疗室信息管理系统计算机源码+系统+mysql+调试部署+lw
  18. 相似度算法--莱文斯坦距离加入同义词逻辑
  19. 微信小程序背景图片background无法在手机端显示问题解决方案
  20. 【千锋Python2205班9.29笔记-day09-字符串(一阶段)】

热门文章

  1. golang xorm cmd xorm工具使用 reverse 反转一个数据库结构,生成代码
  2. 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_01-项目概述-功能构架-项目背景...
  3. ReflectionUtils.invokeMethod的作用
  4. spring jpa查询视图
  5. 数据结构-单链表的正向排序
  6. 两段检验系统生成的identityHashCode是否重复的代码
  7. Splash特征描述子
  8. linux上使用netstat查看当前服务和监听端口
  9. 交错数组(jagged array)
  10. 自己动手写操作系统2011040101