使用userAgent区分浏览器版本

先附上部分浏览器的userAgent

• 火狐： Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0

• 谷歌： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

• Opera： Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 OPR/46.0.2597.57
  Opera/9.27 (Windows NT 5.2; U; zh-cn)

• Edge： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063

• IE 11： Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko

• IE 10： Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)
• IE 9.0： Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;
• IE 8.0： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)
• IE 7.0： Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)
• IE 6.0： Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
• IE 5.0： Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

大概了解一下
操作系统标识

渲染引擎
显示浏览器使用的主流渲染引擎有：Gecko、WebKit、KHTML、Presto、Trident、Tasman等，格式为：渲染引擎/版本信息

判断浏览器类型
通过匹配userAgent中的字段来判断浏览器类型

//取得浏览器的userAgent字符串
var userAgent = navigator.userAgent; 
//判断是否Opera浏览器
var isOpera = userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR"); 
//判断是否Edge浏览器
var isEdge = userAgent.indexOf("Edge") > -1; 
//判断是否Firefox浏览器
var isFF = userAgent.indexOf("Firefox") > -1; 
//判断是否Safari浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; 
//判断Chrome浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && !isEdge && !isOpera; 
//判断是否IE浏览器
var isIE = userAgent.indexOf("MSIE") || userAgent.indexOf("Trident");

封装成js方法，这里通过顺序避免了一些重复判断

//判断浏览器类型
function getBrowserType() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

    if (userAgent.indexOf("Firefox") > -1) {
        return "Firefox";
    } else if (userAgent.indexOf("Edge") > -1) {
        return "Edge";
    } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
        return "Opera";
    } else if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
    } else if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
        return "IE";
    }
}

判断浏览器类型和版本
浏览器版本通过正则匹配获取
以火狐浏览器为例

//获取浏览器及版本，match()方法返回的为数组,此处为["Firefox/54.0"]
var browser = userAgent.match(/firefox\/[\d.]+/gi); 
//获取主版本数值
var version = browser[0].match(/[\d]+/)[0]; 
return "Firefox "+version;  //Firefox 54

整合成JS方法

//判断浏览器类型和版本
function getBrowserVersion() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

    if (userAgent.indexOf("Firefox") > -1) {
        var version = userAgent.match(/firefox\/[\d.]+/gi)[0].match(/[\d]+/)[0];
        return "Firefox "+version;
    } else if (userAgent.indexOf("Edge") > -1) {
        var version = userAgent.match(/edge\/[\d.]+/gi)[0].match(/[\d]+/)[0];
        return "Edge "+version;
    } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
        if (userAgent.indexOf("Opera") > -1) {
            var version = userAgent.match(/opera\/[\d.]+/gi)[0].match(/[\d]+/)[0];
            return "Opera "+version;
        }
        if (userAgent.indexOf("OPR") > -1) {
            var version = userAgent.match(/opr\/[\d.]+/gi)[0].match(/[\d]+/)[0];
            return "Opera "+version;
        }
    } else if (userAgent.indexOf("Chrome") > -1) {
        var version = userAgent.match(/chrome\/[\d.]+/gi)[0].match(/[\d]+/)[0];
        return "Chrome "+version;
    } else if (userAgent.indexOf("Safari") > -1) {
        var version = userAgent.match(/safari\/[\d.]+/gi)[0].match(/[\d]+/)[0];
        return "Safari "+version;
    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
        if (userAgent.indexOf("MSIE") > -1) {
            var version = userAgent.match(/msie [\d.]+/gi)[0].match(/[\d]+/)[0];
            return "IE "+version;
        }
        if (userAgent.indexOf("Trident") > -1) {
            var versionTrident = userAgent.match(/trident\/[\d.]+/gi)[0].match(/[\d]+/)[0];
            var version = parseInt(versionTrident) + 4;
            return "IE "+version;
        }
    }
}

JS中正则表达式用/代替引号，/[\d]+/即为由大于0个数字组成，gi是全局检查，忽略大小写。