first commit

2026-05-01 20:02:13 +02:00
commit 75fb753fc0
77 changed files with 4793 additions and 0 deletions
@@ -0,0 +1,48 @@
+<!-- ═══════════════ REGEX ═══════════════ -->
+<div class="page" id="page-regex">
+  <button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
+  <div class="section-header">
+    <h2><i class="fas fa-asterisk" style="color:var(--pink)"></i> Regex Tester</h2>
+    <p>Test regular expressions with live matching.</p>
+  </div>
+  <div style="max-width:720px;">
+    <div style="display:flex;gap:10px;margin-bottom:12px;">
+      <div style="flex:1;">
+        <div class="panel-label">Pattern</div>
+        <input type="text" id="regexPattern" placeholder="[a-z]+@[a-z]+\.[a-z]+" oninput="testRegex()" />
+      </div>
+      <div style="width:80px;">
+        <div class="panel-label">Flags</div>
+        <input type="text" id="regexFlags" value="gi" placeholder="gi" oninput="testRegex()" style="width:100%;" />
+      </div>
+    </div>
+    <div class="panel-label">Test String</div>
+    <textarea id="regexInput" placeholder="Enter text to test against..." oninput="testRegex()" style="min-height:120px;"></textarea>
+    <div class="panel-label" style="margin-top:14px;">Matches</div>
+    <div id="regexResults" style="background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;font-family:var(--font-mono);font-size:0.85rem;min-height:60px;line-height:1.8;word-break:break-all;"></div>
+    <div id="regexMatchList" style="margin-top:12px;"></div>
+    <div class="api-usage">
+      <button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
+      <div class="api-usage-body">
+        <div class="api-baseurl-note">ℹ️ Regex Tester runs entirely <strong>client-side</strong> using JavaScript's native <code>RegExp</code>. No server API is needed. Here's how to use the same logic in your own code:</div>
+        <div class="api-endpoint">
+          <div class="api-desc">Test a regex pattern against a string in JavaScript.</div>
+          <div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Client-side regex testing — no API call needed</span>
+<span class="kw">const</span> pattern = <span class="str">"[a-z]+@[a-z]+\\.[a-z]+"</span>;
+<span class="kw">const</span> flags = <span class="str">"gi"</span>;
+<span class="kw">const</span> testString = <span class="str">"Contact us at hello@example.com or info@test.org"</span>;
+
+<span class="kw">const</span> regex = <span class="kw">new</span> <span class="fn">RegExp</span>(pattern, flags);
+<span class="kw">const</span> matches = [...testString.<span class="fn">matchAll</span>(regex)];
+
+matches.<span class="fn">forEach</span>((m, i) => {
+  console.<span class="fn">log</span>(<span class="str">`Match ${i+1}: ${m[0]} (index: ${m.index})`</span>);
+});
+<span class="cm">// → Match 1: hello@example.com (index: 14)
+// → Match 2: info@test.org (index: 36)</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+