<meta name="description" content="Umfassender Leitfaden mit praktischen Beispielen und Tipps. Kostenlose Tools inklusive."> <link rel="canonical" href="https://run-dev.com/de/blog/regex-beginners-guide.html"> <meta property="og:title" content="Regular Expressions: A Beginner's Guide"> <meta property="og:description" content="Regular Expressions: A Beginner's Guide. Free guide with examples."> <meta property="og:url" content="https://run-dev.com/de/blog/regex-beginners-guide.html"> <meta property="og:type" content="article"> <meta name="twitter:card" content="summary_large_image"> <link rel="stylesheet" href="/css/style.css?v=20260327c"> <script src="/js/theme.js"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6478776854131333" crossorigin="anonymous"></script> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <script type="application/ld+json">{"@context": "https://schema.org", "@type": "BlogPosting", "headline": "Regex Beginners Guide", "datePublished": "2026-03-16", "dateModified":"2026-03-31", "author": {"@type": "Organization", "name": "RunDev"}, "publisher": {"@type": "Organization", "name": "RunDev"}, "description": "Regular Expressions: A Beginner's Guide. Comprehensive guide with practical examples and tips. Free tools included.", "mainEntityOfPage": {"@type": "WebPage", "@id": "https://run-dev.com/blog/regex-beginners-guide.html"}}</script> <script type="application/ld+json">{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://run-dev.com/"}, {"@type": "ListItem", "position": 2, "name": "Blog", "item": "https://run-dev.com/blog/"}, {"@type": "ListItem", "position": 3, "name": "Regex Beginners Guide", "item": "https://run-dev.com/blog/regex-beginners-guide.html"}]}</script> <link rel="alternate" hreflang="de" href="https://run-dev.com/de/blog/regex-beginners-guide.html"> <link rel="alternate" hreflang="en" href="https://run-dev.com/blog/regex-beginners-guide.html"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-CZ7GQC3DKR"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag("js",new Date());gtag("config","G-CZ7GQC3DKR",{"linker":{"domains":["conv-kit.com,go-calc.com,gen-kit.com,run-dev.com,seo-io.com,txt-tool.com,img-kit.com,the-pdf.com,dl-kit.com,nettool1.com"]}});</script></head> <body> <header class="site-header"> <div class="container header-inner"> <a href="/" class="logo"> <svg viewBox="0 0 28 28" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="28" height="28" rx="6" fill="#38bdf8"/> <path d="M8 6l-6 6 6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M20 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M15 4l-2 20" stroke="#fff" stroke-width="2" stroke-linecap="round"/> </svg> Run<span class="logo-accent">Dev</span> </a> <button class="mobile-menu-btn" aria-label="Toggle menu" onclick="document.querySelector('.nav-links').classList.toggle('open')">☰</button> <nav class="nav-links" aria-label="Main navigation"> <a href="/" class="active">Home</a> <a href="/alltools/">Tools</a> <a href="/blog/">Blog</a> <a href="/about.html">About</a> </nav> <div class="header-actions"> <div class="lang-dropdown"> <button class="lang-btn" onclick="this.nextElementSibling.classList.toggle('show')" aria-label="Language"> <span>🇺🇸</span> EN <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> </button> <div class="lang-menu" id="langMenu"> <a href="/">🇺🇸 English</a> <a href="/es/">🇪🇸 Español</a> <a href="/fr/">🇫🇷 Français</a> <a href="/de/">🇩🇪 Deutsch</a> <a href="/ja/">🇯🇵 日本語</a> <a href="/pt/">🇧🇷 Português</a> <a href="/zh/">🇨🇳 中文</a> <a href="/ko/">🇰🇷 한국어</a> </div> </div> <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> </button> </div> </div> </header> <nav class="breadcrumb" aria-label="Breadcrumb"><div class="container"><a href="/">RunDev</a><span class="sep">/</span><a href="/blog/">Blog</a><span class="sep">/</span><span>Regular Expressions: A Beginner's Guide</span></div></nav> <main id="main-content"> <article class="container" style="max-width:800px;margin:2rem auto;padding:0 1rem"><h1>Reguläre Ausdrücke: Ein Leitfaden für Anfänger</h1> <p class="text-muted" style="margin-bottom:1.5rem"><time datetime="2026-03-31">31. März 2026</time> · 12 Min. Lesezeit</p> <details open style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"> <summary style="cursor:pointer;font-weight:600;margin-bottom:0.75rem">📑 Inhaltsverzeichnis</summary> <ul style="margin:0;padding-left:1.5rem"> <li><a href="#what-are-regular-expressions">Was sind reguläre Ausdrücke?</a></li> <li><a href="#basic-building-blocks">Grundlegende Bausteine</a></li> <li><a href="#quantifiers-explained">Quantifizierer erklärt</a></li> <li><a href="#character-classes">Zeichenklassen und Abkürzungen</a></li> <li><a href="#anchors-boundaries">Anker und Grenzen</a></li> <li><a href="#groups-capturing">Gruppen und Erfassung</a></li> <li><a href="#practical-examples">Praktische Beispiele</a></li> <li><a href="#advanced-techniques">Fortgeschrittene Techniken</a></li> <li><a href="#common-pitfalls">Häufige Fallstricke und wie man sie vermeidet</a></li> <li><a href="#testing-debugging">Testen und Debuggen von Regex</a></li> <li><a href="#performance-considerations">Leistungsüberlegungen</a></li> <li><a href="#faq">Häufig gestellte Fragen</a></li> </ul> </details> <p>Reguläre Ausdrücke (Regex) sind eines der mächtigsten Werkzeuge im Arsenal eines Entwicklers. Sie können zunächst einschüchternd wirken, aber sobald Sie die Grundlagen verstehen, werden sie unverzichtbar für Textverarbeitung, Validierung und Datenextraktion.</p> <p>Ob Sie Benutzereingaben validieren, Protokolldateien parsen oder Daten transformieren – Regex bietet eine prägnante und flexible Möglichkeit, mit Textmustern zu arbeiten. Dieser Leitfaden führt Sie vom absoluten Anfänger zum selbstbewussten Regex-Benutzer.</p> <h2 id="what-are-regular-expressions">Was sind reguläre Ausdrücke?</h2> <p>Ein regulärer Ausdruck ist eine Zeichenfolge, die ein Suchmuster definiert. Stellen Sie es sich als eine Mini-Sprache zur Beschreibung von Textmustern vor – anstatt nach exakten Zeichenketten zu suchen, können Sie nach Mustern wie „jede E-Mail-Adresse" oder „jede Telefonnummer" suchen.</p> <p>Reguläre Ausdrücke werden in praktisch jeder Programmiersprache und jedem Texteditor verwendet. Sie werden in JavaScript, Python, Java, PHP, Ruby, Go und unzähligen anderen Sprachen unterstützt. Sogar Befehlszeilen-Tools wie <code>grep</code>, <code>sed</code> und <code>awk</code> verlassen sich stark auf Regex.</p> <p>Das Schöne an Regex ist, dass Sie die Syntax, sobald Sie sie gelernt haben, über verschiedene Tools und Sprachen hinweg anwenden können. Obwohl es kleinere Unterschiede zwischen „Varianten" von Regex gibt (PCRE, JavaScript, Python usw.), bleiben die Kernkonzepte gleich.</p> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>Profi-Tipp:</strong> Beginnen Sie mit einfachen Mustern und bauen Sie schrittweise Komplexität auf. Versuchen Sie nicht, beim ersten Versuch einen perfekten Regex zu schreiben – iterieren und verfeinern Sie beim Testen.</p></div> <h2 id="basic-building-blocks">Grundlegende Bausteine</h2> <p>Jedes Regex-Muster wird aus fundamentalen Komponenten aufgebaut. Das Verstehen dieser Bausteine ist essentiell, bevor Sie zu komplexeren Mustern übergehen.</p> <h3>Literale Zeichen</h3> <p>Der einfachste Regex ist einfach nur Klartext. Das Muster <code>cat</code> findet den exakten Text „cat" überall in Ihrer Zeichenkette. Die meisten alphanumerischen Zeichen entsprechen sich selbst wörtlich.</p> <p>Einige Zeichen haben jedoch besondere Bedeutungen in Regex und müssen mit einem Backslash maskiert werden: <code>. ^ $ * + ? { } [ ] \ | ( )</code></p> <p>Um einen wörtlichen Punkt zu finden, würden Sie <code>\.</code> anstelle von nur <code>.</code> schreiben</p> <h3>Das Punkt-Metazeichen</h3> <p>Der Punkt (<code>.</code>) ist ein Platzhalter, der jedes einzelne Zeichen außer Zeilenumbruch findet. Das Muster <code>c.t</code> findet „cat", „cot", „cut", „c9t" und sogar „c@t".</p> <p>Dies macht den Punkt unglaublich mächtig, aber auch potenziell gefährlich, wenn er unvorsichtig verwendet wird. Wir werden später behandeln, wie man ihn spezifischer macht.</p> <h3>Zeichenklassen</h3> <p>Eckige Klammern erstellen eine Zeichenklasse, die jedes einzelne Zeichen innerhalb der Klammern findet:</p> <ul> <li><code>[aeiou]</code> findet jeden Vokal</li> <li><code>[0-9]</code> findet jede Ziffer</li> <li><code>[a-zA-Z]</code> findet jeden Buchstaben (Groß- oder Kleinschreibung)</li> <li><code>[a-z0-9]</code> findet jeden Kleinbuchstaben oder jede Ziffer</li> </ul> <p>Sie können eine Zeichenklasse auch mit einem Caret negieren: <code>[^0-9]</code> findet jedes Zeichen, das KEINE Ziffer ist.</p> <h2 id="quantifiers-explained">Quantifizierer erklärt</h2> <p>Quantifizierer geben an, wie oft ein Muster übereinstimmen soll. Sie werden nach dem Element platziert, das Sie wiederholen möchten.</p> <table style="width:100%;border-collapse:collapse;margin:1.5rem 0"> <thead> <tr style="border-bottom:2px solid var(--border)"> <th style="padding:0.75rem;text-align:left">Quantifizierer</th> <th style="padding:0.75rem;text-align:left">Bedeutung</th> <th style="padding:0.75rem;text-align:left">Beispiel</th> </tr> </thead> <tbody> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>*</code></td> <td style="padding:0.75rem">0 oder mehrmals</td> <td style="padding:0.75rem"><code>ab*c</code> findet „ac", „abc", „abbc"</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>+</code></td> <td style="padding:0.75rem">1 oder mehrmals</td> <td style="padding:0.75rem"><code>ab+c</code> findet „abc", „abbc" aber nicht „ac"</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>?</code></td> <td style="padding:0.75rem">0 oder 1 Mal (optional)</td> <td style="padding:0.75rem"><code>colou?r</code> findet „color" und „colour"</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>{n}</code></td> <td style="padding:0.75rem">Genau n Mal</td> <td style="padding:0.75rem"><code>\d{3}</code> findet genau 3 Ziffern</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>{n,}</code></td> <td style="padding:0.75rem">n oder mehrmals</td> <td style="padding:0.75rem"><code>\d{2,}</code> findet 2 oder mehr Ziffern</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>{n,m}</code></td> <td style="padding:0.75rem">Zwischen n und m Mal</td> <td style="padding:0.75rem"><code>\d{2,4}</code> findet 2, 3 oder 4 Ziffern</td> </tr> </tbody> </table> <h3>Gieriges vs. Genügsames Matching</h3> <p>Standardmäßig sind Quantifizierer gierig – sie finden so viel Text wie möglich. Das Muster <code>.*</code> wird alles konsumieren, was es kann.</p> <p>Betrachten Sie das Finden von HTML-Tags: <code><.+></code> angewendet auf <code><b>bold</b></code> wird die gesamte Zeichenkette finden, nicht nur <code><b></code>.</p> <p>Um Quantifizierer genügsam zu machen (so wenig wie möglich finden), fügen Sie ein Fragezeichen hinzu: <code><.+?></code> wird jetzt <code><b></code> und <code></b></code> separat finden.</p> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>Schneller Tipp:</strong> Im Zweifelsfall verwenden Sie genügsame Quantifizierer. Sie sind vorhersehbarer und verursachen seltener unerwartete Übereinstimmungen.</p></div> <h2 id="character-classes">Zeichenklassen und Abkürzungen</h2> <p>Das wiederholte Schreiben von <code>[0-9]</code> wird mühsam. Regex bietet Kurzschrift-Zeichenklassen für gängige Muster.</p> <table style="width:100%;border-collapse:collapse;margin:1.5rem 0"> <thead> <tr style="border-bottom:2px solid var(--border)"> <th style="padding:0.75rem;text-align:left">Kurzschrift</th> <th style="padding:0.75rem;text-align:left">Äquivalent</th> <th style="padding:0.75rem;text-align:left">Beschreibung</th> </tr> </thead> <tbody> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>\d</code></td> <td style="padding:0.75rem"><code>[0-9]</code></td> <td style="padding:0.75rem">Jede Ziffer</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>\D</code></td> <td style="padding:0.75rem"><code>[^0-9]</code></td> <td style="padding:0.75rem">Jede Nicht-Ziffer</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>\w</code></td> <td style="padding:0.75rem"><code>[a-zA-Z0-9_]</code></td> <td style="padding:0.75rem">Jedes Wortzeichen</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>\W</code></td> <td style="padding:0.75rem"><code>[^a-zA-Z0-9_]</code></td> <td style="padding:0.75rem">Jedes Nicht-Wortzeichen</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>\s</code></td> <td style="padding:0.75rem"><code>[ \t\r\n\f]</code></td> <td style="padding:0.75rem">Jedes Leerzeichen</td> </tr> <tr style="border-bottom:1px solid var(--border)"> <td style="padding:0.75rem"><code>\S</code></td> <td style="padding:0.75rem"><code>[^ \t\r\n\f]</code></td> <td style="padding:0.75rem">Jedes Nicht-Leerzeichen</td> </tr> </tbody> </table> <p>Beachten Sie das Muster: Großbuchstaben-Versionen sind Negationen ihrer Kleinbuchstaben-Gegenstücke. Dies macht Regex lesbarer und prägnanter.</p> <h3>Praktische Beispiele mit Abkürzungen</h3> <ul> <li><code>\d{3}-\d{4}</code> findet Telefonnummern wie „555-1234"</li> <li><code>\w+@\w+\.\w+</code> findet einfache E-Mail-Adressen</li> <li><code>\s+</code> findet ein oder mehrere Leerzeichen</li> <li><code>\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}</code> findet IP-Adressen (wenn auch nicht perfekt)</li> </ul> <h2 id="anchors-boundaries">Anker und Grenzen</h2> <p>Anker finden keine Zeichen – sie finden Positionen im Text. Sie sind essentiell für präzises Muster-Matching.</p> <h3>Zeilenanker</h3> <ul> <li><code>^</code> findet den Anfang einer Zeile</li> <li><code>$</code> findet das Ende einer Zeile</li> </ul> <p>Das Muster <code>^Hello</code> findet „Hello" nur am Anfang einer Zeile. Ebenso findet <code>world$</code> „world" nur am Ende einer Zeile.</p> <p>Um eine gesamte Zeile exakt zu finden, verwenden Sie beide: <code>^Hello world$</code> findet nur Zeilen, die genau „Hello world" enthalten, ohne etwas davor oder danach.</p> <h3>Wortgrenzen</h3> <p>Der <code>\b</code>-Anker findet Wortgrenzen – die Position zwischen einem Wortzeichen (<code>\w</code>) und einem Nicht-Wortzeichen.</p> <p>Dies ist unglaublich nützlich zum Finden ganzer Wörter. Das Muster <code>\bcat\b</code> findet „cat", aber nicht „category" oder „scat".</p> <p>Ohne Wortgrenzen würde <code>cat</code> alle drei finden. Wortgrenzen machen Ihre Muster präziser, ohne Komplexität hinzuzufügen.</p> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>Profi-Tipp:</strong> Verwenden Sie immer Wortgrenzen, wenn Sie nach ganzen Wörtern suchen. Es verhindert Fehlübereinstimmungen und macht Ihren Regex zuverlässiger.</p></div> <h2 id="groups-capturing">Gruppen und Erfassung</h2> <p>Klammern dienen zwei Zwecken in Regex: Gruppierung und Erfassung. Sie sind eines der mächtigsten Features, sobald Sie verstehen, wie sie funktionieren.</p> <h3>Gruppierung für Quantifizierer</h3> <p>Klammern ermöglichen es Ihnen, Quantifizierer auf mehrere Zeichen anzuwenden. Das Muster <code>(ha)+</code> findet „ha", „haha", „hahaha" usw.</p> <p>Ohne Klammern würde <code>ha+</code> „ha", „haa", „haaa" finden – der Quantifizierer gilt nur für das vorhergehende Zeichen.</p> <h3>Erfassungsgruppen</h3> <p>Gruppen erfassen auch den gefundenen Text zur späteren Verwendung. Betrachten Sie dieses Telefonnummer-Muster: <code>(\d{3})-(\d{3})-(\d{4})</code></p> <p>Dies erstellt drei Erfassungsgruppen: Vorwahl, Präfix und Rufnummer. In den meisten Sprachen können Sie auf diese Erfassungen zugreifen:</p> <ul> <li>JavaScript: <code>match[1]</code>, <code>match[2]</code>, <code>match[3]</code></li> <li>Python: <code>match.group(1)</code>, <code>match.group(2)</code>, <code>match.group(3)</code></li> <li>In Ersetzungen: <code>$1</code>, <code>$2</code>, <code>$3</code> oder <code>\1</code>, <code>\2</code>, <code>\3</code></li> </ul> <h3>Nicht-erfassende Gruppen</h3> <p>Manchmal möchten Sie Gruppierung ohne Erfassung. Verwenden Sie <code>(?:...)</code> für nicht-erfassende Gruppen: <code>(?:https?://)?www\.example\.com</code></p> <p>Dies gruppiert das Protokoll, erstellt aber keine Erfassungsgruppe, was die Leistung verbessern und Ihren Code vereinfachen kann.</p> <h3>Benannte Erfassungsgruppen</h3> <p>Anstelle von nummerierten Gruppen können Sie sie zur Klarheit benennen: <code>(?<area>\d{3})-(?<prefix>\d{3})-(?<line>\d{4})</code></p> <p>Greifen Sie auf benannte Gruppen mit <code>match.group('area')</code> in Python oder <code>match.groups.area</code> in JavaScript zu. Dies macht Ihren Code selbstdokumentierend.</p> <h2 id="practical-examples">Praktische Beispiele</h2> <p>Wenden wir das Gelernte auf reale Szenarien an. Diese Muster sind Ausgangspunkte – Sie müssen sie oft für Ihre spezifischen Anforderungen anpassen.</p> <h3>E-Mail-Validierung</h3> <p>Ein einfaches E-Mail-Muster: <code>[\w.+-]+@[\w.-]+\.[a-zA-Z]{2,}</code></p> <p>Dies findet die meisten gängigen E-Mail-Formate, ist aber nicht RFC-konform. Für den Produktionseinsatz sollten Sie eine dedizierte E-Mail-Validierungsbibliothek verwenden – E-Mail-Regex kann extrem komplex werden.</p> <h3>URL-Matching</h3> <p>HTTP- und HTTPS-URLs finden: <code>https?://[\w.-]+(?:\.[\w.-]+)+(?:/[\w./?&=%-]*)?</code></p> <p>Dies behandelt Domains, Pfade und Query-Strings. Das <code>s?</code> macht das 's' in 'https' optional.</p> <h3>Telefonnummern</h3> <p>US-Telefonnummern mit flexibler Formatierung: <code>\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}</code></p> <p>Dies findet Formate wie:</p> <ul> <li>(555) 123-4567</li> <li>555-123-4567</li> <li>555.123.4567</li> <li>5551234567</li> </ul> <h3>Datumsformate</h3> <p>ISO-Datumsformat (JJJJ-MM-TT): <code>\d{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12]\d|3[01])</code></p> <p>Dies stellt sicher, dass Monate 01-12 und Tage 01-31 sind. Es ist genauer als <code>\d{4}-\d{2}-\d{2}</code>, das ungültige Daten wie 2024-99-99 akzeptieren würde.</p> <h3>IP-Adressen</h3> <p>IPv4-Adressen: <code>\b(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\b</code></p> <p>Dies validiert, dass jedes Oktett zwischen 0-255 liegt und verhindert Übereinstimmungen wie 999.999.999.999.</p> <h3>Kreditkartennummern</h3> <p>Kreditkartennummern mit optionalen Leerzeichen oder Bindestrichen finden: <code>\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}</code></p> <p>Denken Sie daran, die Prüfsumme separat mit dem Luhn-Algorithmus zu validieren – Regex allein kann nicht überprüfen, ob eine Kartennummer gültig ist.</p> <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1.5rem 0"><p style="margin:0"><strong>Sicherheitshinweis:</strong> Protokollieren oder speichern Sie niemals Kreditkartennummern im Klartext. Verwenden Sie diese Muster nur für die anfängliche Formatvalidierung und tokenisieren Sie dann sofort sensible Daten.</p></div> <h3>Daten aus Protokollen extrahieren</h3> <p>Apache-Protokolleinträge parsen:</article> </main> <footer class="site-footer"> <div class="container"> <div class="footer-grid"> <div class="footer-col"><h4>Format</h4><a href="/tools/json-formatter/">Json Formatter</a><a href="/tools/html-formatter/">Html Formatter</a><a href="/tools/css-formatter/">Css Formatter</a><a href="/tools/sql-formatter/">Sql Formatter</a><a href="/tools/xml-formatter/">Xml Formatter</a></div> <div class="footer-col"><h4>Encode</h4><a href="/tools/base64/">Base64</a><a href="/tools/jwt-decoder/">Jwt Decoder</a><a href="/tools/hash-generator/">Hash Generator</a></div> <div class="footer-col"><h4>Generate</h4><a href="/tools/uuid-generator/">Uuid Generator</a><a href="/tools/regex-tester/">Regex Tester</a></div> <div class="footer-col"><h4>Tools</h4><a href="/tools/diff-checker/">Diff Checker</a><a href="/tools/color-converter/">Color Converter</a><a href="/tools/timestamp-converter/">Timestamp Converter</a><a href="/tools/json-to-csv/">Json To Csv</a></div> <div class="footer-col"><h4>Company</h4><a href="/about.html">About</a><a href="/blog/">Blog</a><a href="/contact.html">Contact</a><a href="/sitemap.xml">Sitemap</a></div> </div> <div class="footer-bottom"> <span>© 2026 RunDev. All processing happens in your browser.</span> <div class="footer-legal"><a href="/privacy.html">Privacy</a><a href="/terms.html">Terms</a></div> </div> </div> <div class="matrix-links" style="text-align:center;padding:10px 0;border-top:1px solid rgba(255,255,255,0.05)"><span style="color:#666;font-size:0.75em">More Tools: </span><a href="https://dl-kit.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">dl-kit</a><a href="https://nettool1.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">nettool1</a><a href="https://go-calc.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">go-calc</a><a href="https://txt-tool.com/" rel="nofollow noopener" style="color:#68a;text-decoration:none;font-size:0.8em;margin-right:12px">txt-tool</a></div></footer> </body> </html>