split方法在低版本IE瀏覽器上無法解析的問題

split方法在低版本IE瀏覽器上無法解析的問題

   前一篇不知道怎麼被博客園給刪了,重新補發一個。

 最近在項目中發現一個很詭異的問題,通過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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章