49 lines
3.0 KiB
HTML
49 lines
3.0 KiB
HTML
|
<!-- ═══════════════ 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>
|
|||
|
|
|