JS实战：零点博主复盘，纯前端开发实时正则表达式测试工具

大家好，我是零点博客的技术博主。在之前的博客中，我们多次讨论过 C# 后端接口开发与 EMLOG 建站的细节。今天我想分享一个在开发爬虫和在线工具时经常用到的技巧——利用 Javascript 打造一个轻量级的正则表达式测试工具。

很多新手朋友在写 SQL 查询语句或者编写复杂的 URL 规则时，正则总是报错，但找不到哪里错了。其实用 Javascript 在浏览器端跑一跑，效率会比翻阅文档高得多。下面我把这个工具的开发过程拆解给大家，拒绝 AI 套话，直接上干货。

一、 需求分析：为什么要自己写工具？

通常我们在后端（如 PHP 或 C#）用 `Regex.IsMatch` 验证数据。但作为前端开发者，我们需要一个能即时反馈结果的界面。这个工具的核心功能包括：

• 输入目标字符串（模拟 JSON 数据或爬取的 HTML 片段）。
• 输入正则表达式规则。
• 输出匹配结果，并对匹配到的文字进行高亮显示。
• 解析 JSON 格式输入，防止非法字符导致页面崩坏。

二、 核心实现逻辑

实现高亮的核心在于 Javascript 的 `replace` 方法结合回调函数。

function highlightText(text, regex) {
  if (!text) return '请输入文本';

  // 使用 exec 方法捕获匹配项，并保留原文本内容
  return text.replace(regex, function(match) {
    return '' + match + '';
  });
}

大家注意，这里我们使用了 ES6+ 的语法。在之前的零点博客教程中提到过，JS 的正则处理能力非常强大，比传统的 C# `System.Text.RegularExpressions` 在处理动态文本流时更加灵活。

三、 完整实战代码与避坑指南

这是一个完整的 HTML + JS 单页工具，你可以直接保存为 `.html` 文件在本地运行。

  
目标文本 (模拟JSON/HTML)
  { "user": "zidian", "age": 18, "status": "active" }

  
正则规则
  
  执行测试

  
点击按钮开始...

四、 开发后端与接口对接的思考

虽然上面的工具是纯前端的，但在实际的大型项目中，我们可以把正则规则配置化。

1. 数据存储：在 MySQL 数据库中创建一张 `regex_rules` 表，存储规则的名称和表达式。
2. 接口开发：开发一个 C# 的 API 接口，接收前端传来的 JSON 对象（包含文本和规则 ID）。
3. 预处理与注入防护：在后端接收到前端传来的正则字符串时，务必使用 SqlCommand.Parameters.AddWithValue 进行参数化查询。如果你直接拼接 SQL 字符串去查询规则表，那将会遭受严重的 SQL 注入攻击。

这个 JS 工具的价值在于，它大大缩短了我们调试后端正则逻辑的时间。当你把配置好的规则传给 C# 后端时，通常一次就能成功。

希望这个分享能帮到大家，开发愉快！关注零点博客，获取更多建站与开发干货。