admin 管理员组文章数量: 887006
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/Xing-WenKai/ua2obj
如果对你有帮助欢迎给个star~，如果使用中有任何问题也欢迎交流
参考：
常见 User-Agent 大全（自己在用）
整理收集常见User-Agent
版权声明：本文标题：JavaScript 通过UserAgent获取用户设备信息（浏览器信息、操作系统信息） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729175634h1327242.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论