正则表达式测试在线工具核心JS实现

正则表达式是开发者日常工作中不可或缺的工具，但编写和调试正则往往比较繁琐。本文介绍正则表达式测试工具的核心JavaScript实现。

在线工具网址：https://see-tool.com/regex-tester
工具截图：

整体架构

工具采用前后端分离架构，前端页面使用Vue开发，核心正则处理逻辑封装在独立的JavaScript类中。这种设计将业务逻辑与UI解耦，便于维护和复用。

核心类设计

整个工具的核心是 RegexHelper 类，所有功能都通过这个类暴露。主要包含以下几个核心方法：

1. 正则表达式测试

testRegex 方法负责执行正则匹配：

testRegex(pattern, testText, flags = {}) {
  const regex = new RegExp(pattern, flagsStr)
  
  if (flags.global) {
    matches = Array.from(testText.matchAll(regex))
  } else {
    const match = testText.match(regex)
    if (match) matches = [match]
  }
  
  return { regex, matches, isValid: true, error: null }
}

这里使用 JavaScript 内置的 RegExp 对象执行匹配。当启用全局标志 g 时，使用 matchAll 获取所有匹配；否则使用 match 获取第一个匹配。

2. 匹配结果高亮

highlightMatches 方法将匹配文本用HTML标签包裹，实现高亮效果：

highlightMatches(text, matches) {
  let result = ''
  let lastIndex = 0
  
  matches.forEach((match) => {
    result += this.escapeHtml(text.slice(lastIndex, match.index))
    result += `<span class="match-highlight">${this.escapeHtml(match[0])}</span>`
    lastIndex = match.index + match[0].length
  })
  
  result += this.escapeHtml(text.slice(lastIndex))
  return result
}

通过记录每次匹配的位置和长度，依次拼接非匹配文本和高亮后的匹配文本。escapeHtml 方法防止XSS攻击。

3. 匹配详情生成

generateMatchDetails 方法展示每个匹配的详细信息：

generateMatchDetails(matches) {
  matches.forEach((match, index) => {
    html += `<div>Match ${index + 1}:</div>`
    html += `<div>Full Match: ${match[0]}</div>`
    html += `<div>Position: ${match.index} - ${match.index + match[0].length - 1}</div>`
    
    if (match.length > 1) {
      for (let i = 1; i < match.length; i++) {
        html += `<div>Group $${i}: ${match[i]}</div>`
      }
    }
  })
}

包括完整匹配内容、位置索引、捕获组等信息。

4. 替换功能

performReplace 方法使用JavaScript原生的 String.replace 实现替换：

performReplace(regex, testText, replaceText) {
  return testText.replace(regex, replaceText)
}

支持 $1、$2 等反向引用语法。

5. sed命令生成

工具还提供转换为Linux sed命令的功能，generateSedCommand 方法：

generateSedCommand(pattern, replacement, flags) {
  const escapedPattern = this.escapeSedString(pattern)
  const escapedReplacement = this.escapeSedString(replacement)
  return `sed 's/${escapedPattern}/${escapedReplacement}/g' input.txt`
}

需要对特殊字符进行转义，包括 /、&、$ 等。

模板系统

工具内置常用正则模板，包括邮箱、手机号、URL、IP地址等。模板数据结构如下：

{
  name: 'email',
  pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}',
  icon: 'fas fa-envelope',
  flags: ''
}

用户点击模板按钮即可快速填入对应正则。

动态加载

页面采用动态加载方式引入核心脚本：

const script = document.createElement('script')
script.src = '/js/regex-helper.js'
script.onload = initHelper
document.head.appendChild(script)

这种按需加载策略可以减少首屏加载时间。

总结

RegexHelper 类封装了正则表达式的核心功能，包括匹配测试、高亮显示、详情展示、替换操作和命令生成。通过清晰的方法划分和独立的类设计，实现了功能完整、易于维护的正则测试工具。

正则表达式测试 在线工具核心JS实现