在js中怎么获取浏览器版本

在JavaScript中获取浏览器版本的方法有很多，包括使用navigator.userAgent、navigator.appVersion、以及第三方库。 其中，使用navigator.userAgent是最常见和最灵活的方法。

通过读取navigator.userAgent，可以获取浏览器的用户代理字符串，其中包含了浏览器的名称、版本号、操作系统等信息。以下是详细步骤和代码示例：

function getBrowserInfo() {
    let userAgent = navigator.userAgent;
    let browserName, browserVersion;
    if (userAgent.indexOf("Firefox") > -1) {
        browserName = "Mozilla Firefox";
        browserVersion = userAgent.match(/Firefox/([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
        browserName = "Opera";
        browserVersion = userAgent.match(/(Opera|OPR)/([0-9]+(?:.[0-9]+)*)/)[2];
    } else if (userAgent.indexOf("Chrome") > -1) {
        browserName = "Google Chrome";
        browserVersion = userAgent.match(/Chrome/([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("Safari") > -1) {
        browserName = "Apple Safari";
        browserVersion = userAgent.match(/Version/([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("MSIE") > -1 || !!document.documentMode === true) { // For IE <= 10
        browserName = "Internet Explorer";
        browserVersion = userAgent.match(/MSIEs([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("Edge") > -1) {
        browserName = "Microsoft Edge";
        browserVersion = userAgent.match(/Edge/([0-9]+(?:.[0-9]+)*)/)[1];
    } else {
        browserName = "Unknown";
        browserVersion = "Unknown";
    }
    return {
        name: browserName,
        version: browserVersion
    };
}
console.log(getBrowserInfo());

一、用户代理字符串解析

用户代理字符串（User-Agent String）是浏览器在发送HTTP请求时提供的一种标识信息。通过解析这个字符串，可以获取到浏览器的名称和版本信息。使用navigator.userAgent是获取浏览器版本的最常见方法，因为它包含了浏览器的详细信息。

let userAgent = navigator.userAgent;

例如，Google Chrome 的用户代理字符串看起来像这样：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36

二、正则表达式提取

通过正则表达式，可以从用户代理字符串中提取出浏览器的名称和版本号。正则表达式是处理字符串匹配的利器，在解析复杂的用户代理字符串时尤为有效。

例如，提取Google Chrome的版本号：

let chromeVersion = userAgent.match(/Chrome/([0-9]+(?:.[0-9]+)*)/)[1];

三、处理多种浏览器

由于每种浏览器的用户代理字符串格式不同，需要对各种浏览器分别处理。以下是常见浏览器的解析逻辑：

1、Google Chrome

if (userAgent.indexOf("Chrome") > -1) {
    browserName = "Google Chrome";
    browserVersion = userAgent.match(/Chrome/([0-9]+(?:.[0-9]+)*)/)[1];
}

2、Mozilla Firefox

if (userAgent.indexOf("Firefox") > -1) {
    browserName = "Mozilla Firefox";
    browserVersion = userAgent.match(/Firefox/([0-9]+(?:.[0-9]+)*)/)[1];
}

3、Apple Safari

if (userAgent.indexOf("Safari") > -1) {
    browserName = "Apple Safari";
    browserVersion = userAgent.match(/Version/([0-9]+(?:.[0-9]+)*)/)[1];
}

4、Microsoft Edge

if (userAgent.indexOf("Edge") > -1) {
    browserName = "Microsoft Edge";
    browserVersion = userAgent.match(/Edge/([0-9]+(?:.[0-9]+)*)/)[1];
}

5、Internet Explorer

if (userAgent.indexOf("MSIE") > -1 || !!document.documentMode === true) {
    browserName = "Internet Explorer";
    browserVersion = userAgent.match(/MSIEs([0-9]+(?:.[0-9]+)*)/)[1];
}

四、注意事项

1、用户代理字符串的变动

用户代理字符串并不是标准化的，各个浏览器厂商可能随时修改其格式，因此解析时需要考虑其变动性。

2、兼容性问题

一些旧版浏览器（如IE）可能会使用不同的格式，需要针对不同版本进行处理。

3、第三方库

如果需要更全面和准确的浏览器检测，可以使用一些第三方库，如 Bowser 或 UAParser.js。这些库提供了更强大的功能和更好的兼容性。

五、示例代码

以下是一个完整的示例代码，展示了如何检测浏览器名称和版本：

function getBrowserInfo() {
    let userAgent = navigator.userAgent;
    let browserName, browserVersion;
    if (userAgent.indexOf("Firefox") > -1) {
        browserName = "Mozilla Firefox";
        browserVersion = userAgent.match(/Firefox/([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
        browserName = "Opera";
        browserVersion = userAgent.match(/(Opera|OPR)/([0-9]+(?:.[0-9]+)*)/)[2];
    } else if (userAgent.indexOf("Chrome") > -1) {
        browserName = "Google Chrome";
        browserVersion = userAgent.match(/Chrome/([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("Safari") > -1) {
        browserName = "Apple Safari";
        browserVersion = userAgent.match(/Version/([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("MSIE") > -1 || !!document.documentMode === true) { // For IE <= 10
        browserName = "Internet Explorer";
        browserVersion = userAgent.match(/MSIEs([0-9]+(?:.[0-9]+)*)/)[1];
    } else if (userAgent.indexOf("Edge") > -1) {
        browserName = "Microsoft Edge";
        browserVersion = userAgent.match(/Edge/([0-9]+(?:.[0-9]+)*)/)[1];
    } else {
        browserName = "Unknown";
        browserVersion = "Unknown";
    }
    return {
        name: browserName,
        version: browserVersion
    };
}
console.log(getBrowserInfo());

通过上述方法和代码，你可以在JavaScript中轻松获取浏览器的名称和版本信息。这对于开发和调试网页应用程序，处理浏览器特定的兼容性问题非常有帮助。