获取浏览器类型，可扩展的写法

本文链接：https://blog.youkuaiyun.com/qq_31261131/article/details/105643269

本文介绍了一种通过用户代理字符串识别浏览器类型的技术实现，包括常见浏览器如Opera、Edge、Firefox、Chrome、Safari及IE的具体识别规则。通过定制化的规则匹配和正则表达式，能够准确判断出包括IE不同版本在内的各种浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const rules = [
	{ name: "Opera", includes: ['Opera'], },
	{ name: "Edge", includes: ['Edge'], },
	{ name: "Firefox", includes: ['Firefox'], },
	{ name: "Opera", includes: ['Opera'], },
	{ name: "Chrome", includes: ['Chrome', 'Safari'] },
	{ name: "Safari", includes: ['Safari'], unIncludes: ['Chrome'] },
	{ 
		name: "IE",
		includes: ["compatible", 'MSIE'],
		customFn: (userAgent) => {
			let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
			reIE.test(userAgent);
			let fIEVersion = parseFloat(RegExp["$1"]);
			if (fIEVersion == 7) {
				return "IE7";
			} else if (fIEVersion == 8) {
				return "IE8";
			} else if (fIEVersion == 9) {
				return "IE9";
			} else if (fIEVersion == 10) {
				return "IE10";
			} else if (fIEVersion == 11) {
				return "IE11";
			} else {
				return "IE7-";
			}
		} 
	}

];
let cacheBrowserType;
/**
 * 获取浏览器类型
 * @param {Object} option { cache: true }
 */
export const getBrowser = (option = { cache: true }) => {
	if (option && option.cache && cacheBrowserType) return cacheBrowserType;
	const userAgent = navigator.userAgent;
	const exist = rules.find(rule => {
		if (rule.includes) {
			for (let i = 0; i < rule.includes.length; i++) {
				if (!userAgent.includes(rule.includes[i])) {
					return false;
				}
			}
		}
		if (rule.unIncludes) {
			for (let i = 0; i < rule.unIncludes.length; i++) {
				if (userAgent.includes(rule.unIncludes[i])) {
					return false;
				}
			}
		}
		if (rule.customFn) {
			const	result = rule.customFn(userAgent);
			if (result) {
				rule.name2 = result;
			} else {
				delete rule.name2;
				return false;
			}
		}
		return true;
	});
	const endResult = (exist && (exist.name2 || exist.name)) || 'unknow';
	cacheBrowserType = endResult;
	return endResult;
};

如果以后多了浏览器类型的场景，可以直接往rules里加规则，这里借鉴了async-validator的设计