JavaScript 通过UserAgent获取用户设备信息（浏览器信息、操作系统信息）

User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

前端js可以通过 navigator.userAgent 拿到当前浏览器与操作系统的信息，例如Chrome浏览器：

可以通过ua信息看到用户当前操作系统为windows10 64位系统，浏览器为Chrome，浏览器版本为90.0.4430.212

当技术人员看到这条ua信息时是十分直观的，如何让非技术人员也能够非常直观的了解用户当前所处的环境？就需要对ua信息进行提取

浏览器种类繁杂，罗列几个常见操作系统+浏览器的ua

// windows 7 + Chrome
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.163 Safari/535.1

// windows 7 + FireFox
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0

// windows 7 + Opera
Opera/9.80 (Windows NT 6.1; U; zh-cn) Presto/2.9.168 Version/11.50

// window 7 + IE 9 
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; Tablet PC 2.0; .NET4.0E)

// 360
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)

// windows 7 + QQ浏览器
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.41 Safari/535.1 QQBrowser/6.9.11079.201

根据上面的ua信息，我们可以将一些关键信息提取出来，最终输出一个包含浏览器名称、浏览器版本、操作系统名称、操作系统版本、设备名称（安卓设备）的对象，以供后续的需求使用

代码如下：

export default () => {
  let userAgentStr = navigator.userAgent
  const userAgentObj = {
    browserName: '',    // 浏览器名称
    browserVersion: '', // 浏览器版本
    osName: '',         // 操作系统名称
    osVersion: '',      // 操作系统版本
    deviceName: '',     // 设备名称
  }

  for(let key in browserReg) {
    if(browserReg[key].test(userAgentStr)) {
      userAgentObj.browserName = key
      if(key === 'Chrome') {
        userAgentObj.browserVersion = userAgentStr.split('Chrome/')[1].split(' ')[0]
      } else if(key === 'IE') {
        userAgentObj.browserVersion = userAgentStr.split('MSIE ')[1].split(' ')[1]
      } else if(key === 'Firefox') {
        userAgentObj.browserVersion = userAgentStr.split('Firefox/')[1]
      } else if(key === 'Opera') {
        userAgentObj.browserVersion = userAgentStr.split('Version/')[1]
      } else if(key === 'Safari') {
        userAgentObj.browserVersion = userAgentStr.split('Version/')[1].split(' ')[0]
      } else if(key === '360') {
        userAgentObj.browserVersion = ''
      } else if(key === 'QQBrowswe') {
        userAgentObj.browserVersion = userAgentStr.split('Version/')[1].split(' ')[0]
      }
    }
  }

  for(let key in deviceReg){
    if(deviceReg[key].test(userAgentStr)){
      userAgentObj.osName = key
      if(key === 'Windows'){
        userAgentObj.osVersion = userAgentStr.split('Windows NT ')[1].split(';')[0]
      } else if(key === 'Mac') {
        userAgentObj.osVersion = userAgentStr.split('Mac OS X ')[1].split(')')[0]
      } else if(key === 'iPhone') {
        userAgentObj.osVersion = userAgentStr.split('iPhone OS ')[1].split(' ')[0]
      } else if(key === 'iPad') {
        userAgentObj.osVersion = userAgentStr.split('iPad; CPU OS ')[1].split(' ')[0]
      } else if(key === 'Android') {
        userAgentObj.osVersion = userAgentStr.split('Android ')[1].split(';')[0]
        userAgentObj.deviceName = userAgentStr.split('(Linux; Android ')[1].split('; ')[1].split(' Build')[0]
      }
    }
  }
  
  return userAgentObj

效果如下：

我还把代码封装了npm包 包名： ua2obj
可以直接在项目中 npm install ua2obj 进行下载
下载后 import ua2obj from 'ua2obj' 进行引入
ua2obj() 调用即可获取信息

github地址： https://github.com/Xing-WenKai/ua2obj

如果对你有帮助欢迎给个star~，如果使用中有任何问题也欢迎交流

参考：
常见 User-Agent 大全（自己在用）
整理收集常见User-Agent