正则表达式测试工具

news2024/11/16 6:11:27

前言

正则表达式测试工具可供您输入正则表达式和测试文本，立即查看匹配结果.

下面是离线的HTML文件,同样可以提供相同的服务.

使用说明

HTML代码

正则表达式的编写经验和方法

总结

使用说明

1.先将HTML代码存储成.html为后缀的文件;

2.然后用浏览器打开这个html文件;

3.按照页面显示,分别输入测试的字符串,正则表达式和特定选项;

4.特定选项：全局搜索(返回多个匹配结果) 忽略大小写

5.点击<测试>按钮,将出现匹配结果.

HTML代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    h2 {
      color: #333;
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-top: 10px;
      font-weight: bold;
    }

    input[type="text"],
    textarea {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 14px;
    }

    input[type="checkbox"] {
      margin-top: 10px;
    }

    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background-color: #45a049;
    }

    #regex {
      width: 1000px;
      height: 80px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px;
      font-size: 14px;
      resize: none;
    }

    #testString {
      width: 1000px;
      height: 180px;
      white-space: pre-wrap;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px;
      font-size: 14px;
      resize: none;
    }

    #matchResult {
      width: 1000px;
      height: 180px;
      white-space: pre-wrap;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px;
      font-size: 14px;
      resize: none;
    }

    </style>
</head>

<body>

<h2>正则表达式测试工具</h2>

<label for="testString">测试字符串：</label><br>
<textarea id="testString"></textarea><br>

<label for="regex">正则表达式：</label><br>
<input type="text" id="regex"><br>

<input type="checkbox" id="globalSearch"> 全局搜索
<input type="checkbox" id="ignoreCase"> 忽略大小写

<button onclick="testRegex()">测试</button>

<label for="matchResult">匹配结果：</label><br>
<textarea id="matchResult"></textarea>

<script>
    function testRegex() {
      var regex = document.getElementById("regex").value;
      var testString = document.getElementById("testString").value;
      var globalSearch = document.getElementById("globalSearch").checked;
      var ignoreCase = document.getElementById("ignoreCase").checked;

      try {
        var regexOptions = '';
        if (globalSearch) {
          regexOptions += 'g';
        }
        if (ignoreCase) {
          regexOptions += 'i';
        }
        var regexObj = new RegExp(regex, regexOptions);
        var matches = testString.match(regexObj);
        if (matches) {
          var result = "匹配成功：\n" + matches.length + "个匹配结果\n";
          for (var i = 0; i < matches.length; i++) {
            result += matches[i] + "\n";
          }
          document.getElementById("matchResult").value = result;
        } else {
          document.getElementById("matchResult").value = "匹配失败";
        }
      } catch (e) {
        document.getElementById("matchResult").value = "正则表达式错误: " + e.message;
      }
    }

</script>

</body>

</html>

正则表达式的编写经验和方法

明确需求：在开始编写正则表达式之前，非常清楚地理解您想要匹配或提取的文本模式。
从简单开始：先构建一个简单的表达式来匹配基本的模式，然后逐步增加复杂性和条件。
测试样本数据：准备一些包含各种可能情况的测试文本，用它们来验证正则表达式的正确性。
利用工具：使用在线正则表达式测试工具或您所使用编程语言的调试工具来实时查看匹配结果。
学习基本语法：熟悉常见的元字符（如 .、*、+、?、\d、\w 等）、字符类（如 [abc]、[0-9] 等）、分组（使用括号 () ）和锚点（如 ^、$ ）的用法。
处理特殊字符：如果要匹配正则表达式中的特殊字符本身（如 $、. 等），需要进行转义，例如 \.$ 匹配一个点字符。
考虑边界情况：思考可能的边界情况，如空字符串、最短匹配与最长匹配等。
参考示例和文档：查找相关的正则表达式示例和权威文档，借鉴他人的经验和最佳实践。
可读性和注释：对于复杂的正则表达式，添加注释来解释各个部分的作用，以提高可读性和可维护性。
调试和优化：如果匹配结果不符合预期，逐步分析和调整表达式，找出问题所在。