前端项目中获取浏览器版本的方法

在我们的前端项目中,navigator.userAgent属性含有当前浏览器相关信息(比如版本号)。
所以当我们想要获取用户当前访问的浏览器的版本时直接去解析navigator.userAgent字段就中。

废话不多说,下面看封装的获取浏览器版本的函数:

function getBrowserVersion() {const userAgent = navigator.userAgent;let version = "";// 判断是否为 Chrome 浏览器if (/Chrome\/(\S+)/.test(userAgent)) {version = userAgent.match(/Chrome\/(\S+)/)[1];}// 判断是否为 Firefox 浏览器else if (/Firefox\/(\S+)/.test(userAgent)) {version = userAgent.match(/Firefox\/(\S+)/)[1];}// 判断是否为 Safari 浏览器else if (/Safari\/(\S+)/.test(userAgent)) {version = userAgent.match(/Version\/(\S+)/)[1];}// 判断是否为 Edge 浏览器else if (/Edg\/(\S+)/.test(userAgent)) {version = userAgent.match(/Edg\/(\S+)/)[1];}// 判断是否为 Internet Explorer 浏览器else if (/MSIE (\S+);/.test(userAgent)) {version = userAgent.match(/MSIE (\S+);/)[1];}return version;
}const browserVersion = getBrowserVersion();
console.log(browserVersion, 'version');

打印结果
在这里插入图片描述

上面的代码中,我们使用正则表达式匹配不同常用浏览器的版本,并返回了版本号。
下面就可以根据业务需要用在自己的项目中了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/187929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

亚马逊云与生成式 AI 的融合——生成式AI的应用领域

文章目录 前言亚马逊云科技增强客户体验聊天机器人和虚拟助手亚马逊云科技 鸿翼:提供精准检索和问答,显著提升全球化售后服务体验AI 赋能的联络中心智能导购&个性化推荐智慧数字人 提升员工生成力和创造力对话式搜索亚马逊云科技 西门子&#xff1…

论文精读 Co-DETR(Co-DINO、Co-Deformable-DETR)

DETRs with Collaborative Hybrid Assignments Training 基于协作混合分配训练的DETRs 论文链接:2211.12860.pdf (arxiv.org) 源码链接:https://github.com/Sense-X/Co-DETR 总结: Co-DETR基于DAB-DETR、Deformable-DETR和DINO网络进行了实…

观测云产品更新 | 监控、数据脱敏、快照分享等优化

观测云更新 监控 1、监控器 - 事件内容插入链接的联动优化:根据检测指标自动生成跳转链接,支持在插入链接后调整过滤条件和时间范围,您也可以自定义跳转链接。其中,若需要插入跳转到仪表板的链接,基于以上逻辑&#…

UniGUI官方Demo打开慢的问题

C:\Program Files (x86)\FMSoft\Framework\uniGUI\Demos\Desktop\AllFeaturesDemo\mdemo.dproj 运行时浏览器加载慢由于Demo中访问了Google服务器,导致了浏览器加载慢,将Demo中Google服务器地址删除即可https://maps.googleapis.com/maps/api/js?sensor…

【渗透】记录阿里云CentOS被渗透攻击

文章目录 发现排查安装Nethogs查询情况 最终方案 发现 流量异常,出现大流量,网络贷带宽占满情况 排查 安装Nethogs 1.1 Nethogs介绍 NetHogs是一个开源的命令行工具(类似于Linux的top命令),用来按进程或程序实时统…

智能优化算法应用:基于乌鸦算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于乌鸦算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于乌鸦算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.乌鸦算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

大数据(十一):概率统计基础

专栏介绍 结合自身经验和内部资料总结的Python教程,每天3-5章,最短1个月就能全方位的完成Python的学习并进行实战开发,学完了定能成为大佬!加油吧!卷起来! 全部文章请访问专栏:《Python全栈教程(0基础)》 再推荐一下最近热更的:《大厂测试高频面试题详解》 该专栏对…

ruoyi+Hadoop+hbase实现大数据存储查询

前言 有个现实的需求,数据量可能在100亿条左右。现有的数据库是SQL Server,随着采集的数据不断的填充,查询的效率越来越慢(现有的SQL Server查询已经需要数十秒钟的时间),看看有没有优化的方案。 考虑过S…

HTML——表单详解

表单元素 一、表单的用途 HTML 表单用于收集用户的输入信息。 HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。 一个表单有三个基本组成部分: 表单标签:这包含了处理表单数据所用的…

成都理工大学校园《我想假如在这里度过大学生活》火了

近日,网上一篇关于成都理工大学校园环境的《我想假如在这里度过大学生活》火了。文章中的提到的大学环境优美,诗意盎然。一则则假如,带我们领略了校园风光,同时也感受到了大学时代的美好。 美丽的图书馆、阳光明媚的操场&#xff…

微服务设计模式

微服务可以对您的企业产生积极影响。因此,有必要了解如何处理微服务架构(MSA)和一些微服务设计模式,以及微服务架构的一般目标或原则。以下是微服务架构方法中需要考虑的四个目标 [1]。 降低成本: MSA 将降低设计、实…

jvm-垃圾收集器

serial serial old ParNew CMS parallel scavanbe parallel old g1 串行收集器组合 Serial Serial Old 开启选项:-XX:SerialGC 串行收集器是最基本、发展时间最长、久经考验的垃圾收集器,也是client模式下的默认收集器配置。 串行收集器采用单线程stop…

训练 CNN 对 CIFAR-10 数据中的图像进行分类-keras实现

1. 加载 CIFAR-10 数据库 import keras from keras.datasets import cifar10# 加载预先处理的训练数据和测试数据 (x_train, y_train), (x_test, y_test) cifar10.load_data() 2. 可视化前 24 个训练图像 import numpy as np import matplotlib.pyplot as plt %matplotlib …

csapp-linklab之第4阶段“输出学号”实验报告(switch跳转表)

实验内容 修改phase4.o相应节中的内容,使其与main.o链接后运行能够输出自己的学号: $ gcc -o linkbomb main.o phase4.o $ ./linkbomb $学号 实验提示 掌握switch语句的机器语言表示及其跳转表的实现。 找出跳转表 反汇编phase4.o,看看里…

分治法之二分查找

思路: 确定查找范围:开始时,将整个有序数组作为查找范围。比较中间元素:计算查找范围的中间元素的索引 mid,并将其与目标值进行比较。 如果中间元素等于目标值,则查找成功,返回中间元素的索引。如果中间元素…

el-table实现动态表头

1.1el-table渲染 <el-tableref"refreshTable":data"tableData"highlight-current-row><el-table-columnfixedwidth"170px"label"测点"align"center"prop"测站名称"/><el-table-column label"…

Android 横竖屏切换 窗口全屏

Android 横竖屏切换 窗口全屏 窗口设置为全屏 废话不多说直接上代码 首先在AndroidManifest的Activity下设置screenOrientation和configChanges - android:configChanges"orientation|screenSize"- android:screenOrientation"fullSensor"一个是设置屏幕取…

SpringBoot入门教程

Spring Boot 是由Spring框架团队推出的一款用来简化Spring应用程序创建和开发过程的框架&#xff0c;它基于Spring框架&#xff0c;使用约定优于配置&#xff0c;大大简化了Spring应用程序的配置和开发过程。在很多企业中&#xff0c;Spring Boot 已经被广泛应用&#xff0c;成…

浅谈安科瑞可编程电测仪表在老挝某项目的应用

摘要&#xff1a;本文介绍了安科瑞多功能电能表在老挝某项目的应用。AMC系列交流多功能仪表是一款专门为电力系统、工矿企业、公用事业和智能建筑用于电力监控而设计的智能电表。 Abstract&#xff1a;This article introduces the application of the multi-function energy …

Arrays.asList(T... a)导致的事故

&#x1f4da;项目场景: 修改数据时&#xff0c;允许将非必填字段清空。 ⛔问题描述: 由于使用的是Mybatis-Plus&#xff0c;只能使用LambdaUpdateWrapper或UpdateWrapper通过set(column,val)来将字段清空&#xff1b;因为字段太多导致大量set放在一个方法&#xff0c;不符合…