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

Posted 2020-07-26

   今天在项目中发现一个很诡异的问题，通过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) - 1
            limit >>> 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/