实现 正则表达式测试器 工具

分类：developer ｜ 标签：正则、Regex、匹配、调试 实时正则匹配高亮、分组捕获与替换，调试爬虫/表单校验/日志提取

2.1 功能说明

实时正则匹配高亮、分组捕获与替换，调试爬虫/表单校验/日志提取

2.1.1 使用指南

使用指导

什么是正则

正则表达式（Regex）用于描述字符串的匹配规则，广泛用于表单校验、日志提取、爬虫解析等场景。

常用语法

· \d 数字、\w 单词字符、. 任意字符（换行外）

· * 0+ 次、+ 1+ 次、? 0/1 次、{n,m} 区间

· ( ) 捕获分组、(?: ) 非捕获、| 或、[] 字符集

标志位

g 全局、i 忽略大小写、m 多行、s 点匹配换行、u Unicode、y 粘连。

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> 中定义的主要函数/方法：

• escapeHtml()
• run()
• doReplace()
• copy()

2.2.3 关键实现代码

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

import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const pattern = ref('(\\d{3})-(\\d{4})')
const flagList = ref(['g'])
const text = ref('联系电话 138-0011，备用 139-0022。')
const replacement = ref('$1****')
const replaced = ref('')
const error = ref('')
const matches = ref([])

const flags = computed(() => flagList.value.join(''))

function escapeHtml(s) {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
}

function run() {
  error.value = ''
  matches.value = []
  if (!pattern.value) {
    return
  }
  let re
  try {
    re = new RegExp(pattern.value, flags.value)
  } catch (e) {
    error.value = '正则语法错误：' + e.message
    return
  }
  const out = []
  if (flags.value.includes('g') || flags.value.includes('y')) {
    let m
    let guard = 0
    while ((m = re.exec(text.value)) !== null) {
      out.push(m)
      if (m.index === re.lastIndex) re.lastIndex++
      if (++guard > 100000) break
    }
  } else {
    const m = re.exec(text.value)
    if (m) out.push(m)
  }
  matches.value = out
  doReplace()
}

const highlighted = computed(() => {
  if (error.value || !pattern.value || matches.value.length === 0) return ''
  let re
  try { re = new RegExp(pattern.value, flags.value.includes('g') ? flags.value : flags.value + 'g') } catch { return '' }
  return escapeHtml(text.value).replace(re, (...args) => {
    const full = args[0]
    return '<mark>' + escapeHtml(full) + '</mark>'
  })
})

const placeholder = '<span class="muted">无匹配，下方显示原文</span>'

const matchRows = computed(() =>
  matches.value.map((m) => ({
    value: m[0],
    index: m.index,
    groups: m.slice(1)
  }))
)

function doReplace() {
  error.value && (error.value = error.value)
  if (error.value || !pattern.value) { replaced.value = ''; return }
  try {
    const re = new RegExp(pattern.value, flags.value.includes('g') ? flags.value : flags.value + 'g')
    replaced.value = text.value.replace(re, replacement.value)
  } catch (e) {
    replaced.value = ''
  }
}

function copy(v) {
  if (!v) return
  navigator.clipboard?.writeText(v).then(() => ElMessage.success('已复制'))
}

run()

2.3 效果截图

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