实现 UA 解析 工具

分类：developer ｜ 标签：UA、user-agent、解析 解析 UA 识别浏览器/系统/设备

2.1 功能说明

解析 UA 识别浏览器/系统/设备

2.1.1 使用指南

功能说明

解析 User-Agent 字符串，识别浏览器、操作系统、设备类型（前端正则启发式）。

使用场景

日志分析、兼容性判断。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• pick()
• run()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const ua = ref('')
const res = ref(null)
const error = ref('')

function pick(re, s, d = '未知') { const m = s.match(re); return m ? m[1] : d }
function run() {
  error.value = res.value = null
  const s = ua.value.trim()
  if (!s) { error.value = '请输入 UA'; return }
  let browser = '未知', os = '未知', device = '桌面'
  if (/Edg\/([\d.]+)/.test(s)) browser = 'Edge ' + pick(/Edg\/([\d.]+)/, s)
  else if (/OPR\/([\d.]+)/.test(s)) browser = 'Opera ' + pick(/OPR\/([\d.]+)/, s)
  else if (/Firefox\/([\d.]+)/.test(s)) browser = 'Firefox ' + pick(/Firefox\/([\d.]+)/, s)
  else if (/Chrome\/([\d.]+)/.test(s)) browser = 'Chrome ' + pick(/Chrome\/([\d.]+)/, s)
  else if (/Safari\/([\d.]+)/.test(s)) browser = 'Safari ' + pick(/Version\/([\d.]+)/, s)
  if (/Windows NT 10/.test(s)) os = 'Windows 10/11'
  else if (/Windows NT/.test(s)) os = 'Windows ' + pick(/Windows NT ([\d.]+)/, s)
  else if (/Mac OS X ([\d_]+)/.test(s)) os = 'macOS ' + pick(/Mac OS X ([\d_]+)/, s).replace(/_/g, '.')
  else if (/Android ([\d.]+)/.test(s)) os = 'Android ' + pick(/Android ([\d.]+)/, s)
  else if (/iPhone OS ([\d_]+)/.test(s)) os = 'iOS ' + pick(/iPhone OS ([\d_]+)/, s).replace(/_/g, '.')
  else if (/Ubuntu/.test(s)) os = 'Ubuntu'
  else if (/Linux/.test(s)) os = 'Linux'
  if (/Mobile/.test(s)) device = '手机'
  else if (/Tablet|iPad/.test(s)) device = '平板'
  else if (/TV|SmartTV/.test(s)) device = '电视'
  res.value = { 浏览器: browser, 操作系统: os, 设备类型: device, 原始: s }
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/ua-parser