work.github.io/regToolWeb.html at main · mingle98/work.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>正则表达式可视化工具</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: 100vh;
      box-sizing: border-box;
    }
    h1 {
      color: #333;
      margin-bottom: 10px;
    }
    p {
      color: #666;
    }
    input {
      width: 100%;
      max-width: 600px;
      padding: 12px;
      font-size: 18px;
      margin-bottom: 15px;
      border-radius: 5px;
      border: 1px solid #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
    }
    input:focus {
      border-color: #007BFF;
      box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
      outline: none;
    }
    #iframeContainer {
      width: 100%;
      max-width: 800px;
      flex-grow: 1;
      margin: 20px 0;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    .error {
      color: red;
      font-weight: bold;
      margin-top: 10px;
    }
    #textInputContainer {
      width: 100%;
      max-width: 600px;
      margin-top: 10px;
      padding-bottom: 50px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #matchResult {
      margin-top: 10px;
      font-weight: bold;
      font-size: 16px;
    }
    #highlightedText {
      margin-top: 10px;
      font-size: 18px;
    }
    .highlight {
      background-color: #28a745;
      color: white;
      padding: 2px 5px;
      border-radius: 3px;
    }
    /* 按钮样式 */
    button {
      padding: 10px 15px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }
    button:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <h1>动态正则表达式可视化工具</h1>
  <p>输入正则表达式和待匹配文本，即时查看结果。</p>

  <!-- 用户输入正则表达式框 -->
  <input type="text" id="regexInput" placeholder="请输入正则表达式，例如 ^(a|b)*?$">

  <!-- Iframe 的容器 -->
  <div id="iframeContainer">
    <iframe id="regexIframe" src="https://www.toolscat.com/dev/regex-img#!embed=true&flags=&re="></iframe>
  </div>

  <div id="errorMessage" class="error"></div>

  <!-- 新增: 用户输入文本框 -->
  <div id="textInputContainer">
    <h4>&nbsp文本正则匹配</h4>
    <input type="text" id="textInput" placeholder="请输入待匹配文本">
    <div id="matchResult"></div>
    <div id="highlightedText"></div>
  </div>

  <script>
    const regexInput = document.getElementById('regexInput');
    const textInput = document.getElementById('textInput');
    const iframeContainer = document.getElementById('iframeContainer');
    const errorMessage = document.getElementById('errorMessage');
    const matchResult = document.getElementById('matchResult');
    const highlightedText = document.getElementById('highlightedText');

    /**
     * 监听正则表达式输入并更新 iframe 的内容
     */
    regexInput.addEventListener('input', () => {
      const rawRegex = regexInput.value.trim(); // 获取用户输入
      errorMessage.textContent = ''; // 清除错误提示
      matchResult.textContent = ''; // 清除匹配结果
      highlightedText.innerHTML = ''; // 清空高亮文本

      try {
        // 编码正则表达式以适配 URL 参数
        const encodedRegex = encodeURIComponent(rawRegex);

        // 创建新的 iframe，替换现有的 iframe 内容
        const newIframe = document.createElement('iframe');
        newIframe.src = `https://www.toolscat.com/dev/regex-img#!embed=true&flags=&re=${encodedRegex}`;
        newIframe.style.width = '100%';
        newIframe.style.height = '100%';
        newIframe.style.border = 'none';

        // 清空原有 iframeContainer 并插入新的 iframe
        iframeContainer.innerHTML = '';
        iframeContainer.appendChild(newIframe);
      } catch (error) {
        // 捕获错误（如无效正则表达式）
        errorMessage.textContent = `错误：请输入有效的正则表达式`;
      }
    });

    /**
     * 监听文本输入框并进行正则匹配
     */
    textInput.addEventListener('input', () => {
      const rawRegex = regexInput.value; // 获取当前的正则表达式
      const textToMatch = textInput.value; // 获取待匹配文本

      try {
        const regex = new RegExp(rawRegex, 'g'); // 创建正则表达式对象，带 g 标志

        // 检查是否匹配，并构建高亮文本
        const matches = textToMatch.replace(regex, (match) => {
          return `<span class="highlight">${match}</span>`;
        });

        if (regex.test(textToMatch)) {
          matchResult.textContent = '匹配成功！';
        } else {
          matchResult.textContent = '没有找到匹配。';
        }

        // 更新高亮显示文本
        highlightedText.innerHTML = matches || '无输入';
      } catch (error) {
        // 捕获错误（如无效正则表达式）
        matchResult.textContent = '';
      }
    });
  </script>
</body>
</html>