30 Nützliche Regex-Codeausschnitte für Webentwickler

Reguläre Ausdrücke sind ein mächtiges Werkzeug, das sich im Werkzeuggürtel jedes Entwicklers befinden sollte. Sie können mit einer Zeichenfolge basierend auf sehr komplexen Parametern übereinstimmen, wodurch Sie beim Erstellen dynamischer Websites viel Zeit sparen können.

Webentwickler stehen vor anderen Aufgaben als Softwareentwickler, doch viele der gleichen Code-Grundlagen bleiben bestehen. Reguläre Ausdrücke (oder Regex) habe eine steile anfängliche Lernkurve, aber sie können sein Bei richtiger Anwendung enorm stark.

Der schwierigste Teil ist das Erlernen der Syntax und das Schreiben des eigenen Regex-Codes von Grund auf. Um Zeit zu sparen, habe ich 30 verschiedene Regex-Codeausschnitte organisiert, die Sie in Entwicklungsprojekte integrieren können. Und da Regex nicht auf eine einzige Sprache beschränkt ist, können Sie diese Ausschnitte auf alles anwenden JavaScript zu PHP oder Python.

1. Passwortstärke

^ (? =. * [AZ]. * [AZ]) (? =. * [! @ # $ & *]) (? =. * [0-9]. * [0-9]) (? = . * [az]. * [az]. * [az]). 8 $

Die Überprüfung der Kennwortstärke ist häufig subjektiv, so dass keine absolut richtige Antwort vorliegt. Aber ich denke, dass dieses Regex-Snippet ein guter Ausgangspunkt ist, wenn Sie Ihren eigenen Kennwortprüfer nicht von Grund auf neu schreiben möchten. (Quelle)

2. Hexadezimalfarbe

\ # ([a-fA-F] | [0-9]) 3, 6

Das Feld der Webentwicklung ist allgegenwärtig mit Hex-Farbcodes. Dieses Regex-Snippet kann verwendet werden, um Hex-Code-Übereinstimmungen aus beliebigen Zeichenfolgen für beliebige Zwecke abzurufen. (Quelle)

3. Bestätigen Sie die E-Mail-Adresse

/[A-Z0-9._%+-(++@[A-Z0-9-++.+.[A-Z(2,4/igm

Eine der häufigsten Aufgaben eines Entwicklers besteht darin, zu prüfen, ob eine Zeichenfolge im Stil einer E-Mail-Adresse formatiert ist. Es gibt viele verschiedene Varianten, um diese Aufgabe auszuführen. Daher bietet dieser SitePoint-Link zwei unterschiedliche Code-Snippets zum Überprüfen der E-Mail-Syntax anhand einer Zeichenfolge. (Quelle)

4. IPv4-Adresse

/\b(?:(?:25[0-5( || 2 )00-4 ][0-9 ]|[01 ]?[0-9 ][0-9 ]?)\.)3 (& Alpha;: 25 [0-5] | 2 [0-4] [0-9] | [01] [0-9] [0-9]?) \ B /

Ähnlich wie bei einer E-Mail-Adresse wird die typische IP-Adresse verwendet, um einen bestimmten Computer zu identifizieren, der auf das Internet zugreift. Dieser reguläre Ausdruck überprüft eine Zeichenfolge, um festzustellen, ob sie der IPv4-Adressensyntax entspricht. (Quelle)

5. IPv6-Adresse

(([0-9a-fA-F] 1,4:) 7,7 [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1 , 4:) 1,7: | ([0-9a-fA-F] 1,4:) 1,6: [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1,4:) 1,5 (: [0-9a-fA-F] 1,4) 1,2 | ([0-9a -fA-F] 1,4:) 1,4 (: [0-9a-fA-F] 1,4) 1,3 | ([0-9a-fA-F] 1,4:) 1,3 (: [0-9a-fA-F] 1,4) 1,4 | ([0-9a-fA-F] 1,4 :) 1,2 (: [0-9a-fA-F] 1,4) 1,5 | [0-9a-fA-F] 1,4: ((: [0 -9a-fA-F] 1,4) 1,6) |: ((: [0-9a-fA-F] 1,4) 1,7 |:) | fe80: (: [0-9a-fA-F] 0,4) 0,4% [0-9a-zA-Z] 1, |: :( ffff (: 0 1,4) 0,1:) 0,1 ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9 ]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9]) | ([0-9a-fA-F] 1,4:) 1,4: ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9 ]) 0,1 [0-9]) \.) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9])  0,1 [0-9]))

Alternativ können Sie mit diesem erweiterten Regex-Snippet eine Adresse auf die neuere IPv6-Syntax überprüfen. Der Unterschied ist geringfügig, aber während der Entwicklung von entscheidender Bedeutung. (Quelle)

6. Tausende Separator

/ \ d 1,3 (? = (\ d 3) + (?! \ d)) / g

Herkömmliche Nummerierungssysteme erfordern bei jeder dritten Ziffer einer größeren Zahl ein Komma, einen Punkt oder eine andere Markierung. Dieser Regex-Code kann für jede Zahl verwendet werden und jede Markierung, die Sie auswählen, auf jede dritte Ziffer in Tausend, Millionen usw. setzen. (Quelle)

7. Bereiten Sie HTTP auf Hyperlink vor

if (! s.match (/ ^ [a-zA-Z] +: \ / \ //)) s = 'http: //' + s; 

Egal, ob Sie mit JavaScript, Ruby oder PHP arbeiten, dieser reguläre Ausdruck kann sich als sehr hilfreich erweisen. Es prüft jede URL-Zeichenfolge, um zu sehen, ob sie ein HTTP / HTTPS-Präfix hat, und wenn nicht, dann voranstellen. (Quelle)

8. Ziehen Sie die Domain von der URL ab

/https?:\/\/(?:[-\w>+\.)?([-\w(+)\.\w+(?:\.\w+)?\/?.*/i

Jede Website-Domäne enthält das ursprüngliche Protokoll (HTTP oder HTTPS) und häufig eine Subdomain sowie den zusätzlichen Seitenpfad. Mit diesem Snippet können Sie all das durchschneiden und nur den Domainnamen ohne zusätzlichen Schnickschnack zurückgeben. (SourceL

9. Sortieren Sie die Schlüsselwörter nach der Wortanzahl

^ [^ \ s] * $ entspricht genau 1-Wort-Schlüsselwort ^ [^ \ s] * \ s [^ \ s] * $ entspricht genau 2-Wort-Schlüsselwort ^ [^ \ s] * \ s [^ \ s] * entspricht Schlüsselwörtern mit mindestens 2 Wörtern (2 und mehr) ^ ([^ \ s] * \ s) 2 [^ \ s] * $ entspricht genau dem aus drei Wörtern bestehenden Schlüsselwort ^ ([^ \ s] * \ s ) 4 [^ \ s] * $ entspricht mindestens 5 Wörtern (Longtail)

Nutzer von Google Analytics und Webmaster-Tools werden von diesem regulären Ausdruck wirklich begeistert sein. Es kann Schlüsselwörter anhand der Anzahl der in einer Suche verwendeten Wörter sortieren und organisieren.

Dies kann numerisch spezifisch sein (d. H. Nur 5 Wörter) oder es kann einem Wortbereich (d. H. 2 oder mehr Wörtern) entsprechen. Beim Sortieren von Analysedaten ist dies ein mächtiger Ausdruck. (Quelle)

10. Suchen Sie in PHP einen gültigen Base64-String

\ php [\ t] eval \ (base64_decode \ (\ '(([A-Za-z0-9 + /] 4) * ([A-Za-z0-9 + /] 3 = | [A-Za-z0-9 + /] 2 ==)?) 1 \ '\) \) \;

Wenn Sie ein PHP-Entwickler sind, müssen Sie möglicherweise an einem bestimmten Punkt den Code analysieren und nach Base64-kodierten binären Objekten suchen. Dieses Snippet kann auf den gesamten PHP-Code angewendet werden und prüft, ob vorhandene Base64-Zeichenfolgen vorhanden sind. (Quelle)

11. Gültige Telefonnummer

^ \ +? \ d 1,3? [-.]? \ (? (?: \ d 2,3) \)? [-.]? \ d \ d \ d [-.]? \ d \ d \ d \ d $

Kurz, süß und auf den Punkt. Dieser Regex-Code überprüft jede herkömmliche Telefonnummernsyntax, die hauptsächlich auf dem amerikanischen Stil von Telefonnummern basiert.

Da dies zu einem recht komplizierten Thema werden kann, empfehle ich, diesen Stack-Thread für ausführlichere Antworten zu überfliegen. (Quelle)

12. Führender & Nachlaufender Whitespace

^ [\ s] + | [\ s] + $

Verwenden Sie dieses Code-Snippet, um führende / nachgestellte Leerzeichen aus einer Zeichenfolge zu ziehen. Dies ist möglicherweise keine große Sache, kann jedoch manchmal Auswirkungen auf die Ausgabe haben, wenn sie aus einer Datenbank abgerufen oder auf eine andere Dokumentcodierung angewendet wird. (Quelle)

13. Bildquelle ziehen)

\< *[img][^\>] * [src] * = * [\ "\ '] 0,1 ([^ \" \' \>] *)

Wenn Sie aus irgendeinem Grund die Quelle eines Bildes direkt aus HTML-Code herausholen müssen, ist dieses Code-Snippet die perfekte Lösung. Obwohl es im Backend reibungslos laufen kann, sollten Frontend-JS-Entwickler stattdessen die .attr () -Methode von jQuery für das Frontend verwenden. (Quelle)

14. Datum im Format TT / MM / JJJJ prüfen

^ (? :( ?: 31 (\ / | - | \.) (?: 0? [13578] | 1 [02])) \ 1 | (? :( ?: 29 | 30) (\ / | - | \.) (?: 0? [1,3-9] | 1 [0-2]) \ 2)) (? :( ?: 1 [6-9] | [2-9] \ d)? \ d 2) $ | ^ (?: 29 (\ / | - | \.) 0? 2 \ 3 (? :(? :( ?: 1 [6-9] | [2-9] \ d (0: 48 [2468] [048] | [13579] [26]) | (? :( ?: 16 | [2468] [048] | [3579] [26]) 00)) )) $ | ^ (?: 0? [1-9] | 1 \ d | 2 [0-8]) (\ / | - | \.) (? :( ?: 0? [1-9]) | (?: 1 [0-2])) \ 4 (? :( ?: 1 [6-9] | [2-9] \ d)? \ D 2) $

Datumsangaben sind schwierig, da sie als Text + Zahlen oder als Zahlen mit unterschiedlichen Formaten angezeigt werden können. PHP hat eine fantastische Datumsfunktion, aber dies ist nicht immer die beste Wahl, wenn Sie einen rohen String ziehen. Verwenden Sie stattdessen diesen regulären Ausdruck, der für diese bestimmte Datumssyntax erstellt wurde. (Quelle)

15. YouTube-Video-ID-Übereinstimmung

/http:\/\/(?:youtu\.be\/|(?:[az]2,3\.)?youtube\.com\/watch(?:\?|#\!)v =) ([\ w -] 11). * / gi

YouTube hat seit Jahren dieselbe URL-Struktur, weil es einfach funktioniert. Es ist auch die beliebteste Website zum Teilen von Videos im Web, daher neigen YouTube-Videos dazu, den meisten Traffic zu erzeugen.

Wenn Sie eine YouTube-Video-ID aus einer URL abrufen müssen, ist dieser Regex-Code perfekt und sollte für alle Varianten von YouTube-URL-Strukturen einwandfrei funktionieren. (Quelle)

16. Gültige ISBN

/ \ b (?: ISBN (? ::? |)) ((?: 97 [89])? \ d 9 [\ dx]) \ b / i

Gedruckte Bücher folgen einem Nummerierungssystem, das als ISBN bezeichnet wird. Dies kann recht schwierig werden, wenn Sie die Unterschiede zwischen ISBN-10 und ISBN-13 in Betracht ziehen.

Mit diesem unglaublichen Snippet können Sie jedoch eine ISBN-Nummer überprüfen und prüfen, ob es sich um ISBN10 oder 13 handelt. Der gesamte Code ist in PHP geschrieben, so dass dies für Webentwickler außergewöhnlich nützlich sein kann. (Quelle)

17. Überprüfen Sie die Postleitzahl

^ \ d 5 (?: [- \ s] \ d 4)? $

Der Schöpfer dieses Snippets hat seine Arbeit nicht nur kostenlos veröffentlicht, sondern er hat sich auch die Zeit genommen, es zu erklären. Sie finden dieses Snippet hilfreich, wenn Sie eine typische 5-stellige Postleitzahl oder die längere 9-stellige Version verwenden.

Denken Sie daran, dass dies in erster Linie für das amerikanische Postleitzahlen-System gedacht ist, sodass möglicherweise Anpassungen für andere Länder erforderlich sind. (Quelle)

18. Gültiger Twitter-Benutzername

/ @ ([A-Za-z0-9 _] 1,15) /

Hier ist ein sehr kleines Code-Snippet zum Abgleichen von Twitter-Benutzernamen, die in einer Zeichenfolge gefunden werden. Es prüft auf @erwähnen Syntax, die sich zum automatischen Scannen des Inhalts eines Tweets (oder Tweets) eignet. (Quelle)

19. Kreditkartennummern

^ (?: 4 [0-9] 12 (?: [0-9] 3) | 5 [1-5] [0-9] 14 | 6 (?: 011 | 5 [ 0-9] [0-9]) [0-9] 12 | 3 [47] [0-9] 13 | 3 (& alpha;: 0 [0-5] | [68] [0-9 ]) [0-9] 11 | (?: 2131 | 1800 | 35 \ d 3) \ d 11) $

Die Validierung einer Kreditkartennummer erfordert häufig eine sichere Plattform, die online an anderer Stelle gehostet wird. Regex kann jedoch für die minimalen Anforderungen einer typischen Kreditkartennummer verwendet werden.

Eine umfassendere Liste der Codes für einzelne Karten finden Sie hier. Dazu gehören Visa, MasterCard, Discover und viele andere. (Quelle)

20. Finden Sie CSS-Attribute

^ \ s * [a-zA-Z \ -] + \ s * [:] 1 \ s [a-zA-Z0-9 \ s. #] + [;] 1

Es ist vielleicht selten, Regex über CSS auszuführen, aber es ist auch keine ungewöhnliche Situation.

Dieses Code-Snippet kann verwendet werden, um alle passenden CSS-Eigenschaften und -Werte aus den einzelnen Selektoren abzurufen. Es kann aus einer Reihe von Gründen verwendet werden, möglicherweise um CSS-Blöcke anzuzeigen oder doppelte Eigenschaften zu entfernen. (Quelle)

21. HTML-Kommentare entfernen

Wenn Sie aus irgendeinem Grund alle Kommentare aus einem HTML-Block entfernen müssen, ist dies der zu verwendende Regex-Code. Neben dem Ausdruck finden Sie ein PHP-Beispiel mit preg_replace. (Quelle)

22. Facebook-Profil-URL

/(?:http:\/\/)?(?:www\.)?facebook\.com\/(?:(?:\w)*#!\/)?(?:pages\/)? (?: [\ w \ -] * \ /) * ([\ w \ -] *) /

Facebook ist unglaublich beliebt und hat viele verschiedene URL-Schemata durchlaufen. In einer Situation, in der Sie Profil-URLs von Benutzern verwenden, kann es hilfreich sein, Zeichenfolgen zu analysieren und zu bestätigen, dass sie ordnungsgemäß strukturiert sind. Dieses Snippet kann genau das tun und ist perfekt für alle FB-artigen Links. (Quelle)

23. Überprüfen Sie die Version von Internet Explorer

^. * MSIE [5-8] (?: \. [0-9] +)? (?!. * Trident \ / [5-9] \. 0). * $

Der Umstieg von Microsoft auf Edge war nicht einstimmig und viele Menschen verlassen sich noch immer auf den klassischen Internet Explorer. Entwickler müssen häufig nach IE-Versionen suchen, um Inkonsistenzen mit Rendering-Engines zu behandeln.

Dieses Snippet kann in JavaScript verwendet werden, um einen Browser-Agent basierend auf der verwendeten Version von Internet Explorer (5-11) zu testen. (Quelle)

24. Auszugspreis

/(\$[0-9 ,(+(\.[0-9 ×2)?)/

Die Preisgestaltung erfolgt in einer Vielzahl von Formaten, die Dezimalzahlen, Kommas und Währungssymbole enthalten. Mit diesem regulären Ausdruck können Sie alle diese verschiedenen Formate prüfen, um einen Preis aus einer beliebigen Zeichenfolge zu ziehen. (Quelle)

25. Analysieren Sie den E-Mail-Header

/\b[A-Z0-9._%+-(++@(???[_-Z0-9-++\.)+[A-Z $2,6 verzeichnis\b/i

Mit dieser einzigen Codezeile können Sie einen E-Mail-Header analysieren, um ihn herauszuziehen “zu” Informationen aus dem Header. Es kann zusammen mit mehreren E-Mails verwendet werden.

Wenn Sie es vorziehen, Regex für diese Aufgabe zu vermeiden, können Sie stattdessen auf eine Parsing-Bibliothek zurückgreifen. (Quelle)

26. Ordnen Sie einen bestimmten Dateityp zu

/^(.**.(?!(htm|html|class|js)$)??????l$/i

Wenn Sie mit verschiedenen Dateiformaten wie .xml, .html und .js arbeiten, können Sie Dateien lokal und von Benutzern hochgeladen prüfen. Dieses Snippet ruft eine Dateierweiterung ab, um zu überprüfen, ob diese aus einer Reihe gültiger Erweiterungen gültig ist, die bei Bedarf geändert werden können. (Quelle)

27. Passen Sie eine URL-Zeichenfolge an

/[-a-zA-Z0-9@:%_\+.~#?&//=(2,256\.[az(2,4\b(\/[-a-zA-Z0 -9 @:% _ \ +. ~ #? & // =] *)? / Gi

Dieses Snippet kann sowohl für HTTPS- als auch für HTTP-Zeichenfolgen verwendet werden, um zu prüfen, ob der Text der herkömmlichen TLD-Domänensyntax entspricht. Es gibt auch eine einfache Implementierung dieses regulären Ausdrucks mit RegExp von JavaScript. (Quelle)

28. Anhängen rel =”nofollow” zu Links

(] *) (href = "https?: //) ((?! (?: (?: www \.)? '. implode (' | (?: www \.)? ', $ follow_list).') ) [^ "] +)" ((?!. * \ brel =) [^>] *) (?: [^>] *)>

Wenn Sie mit einem Stapel von HTML-Code arbeiten, kann es grausam sein, manuelle Arbeit für sich wiederholende Aufgaben anzuwenden. Reguläre Ausdrücke sind perfekt für diesen Anlass und sparen viel Zeit.

Dieses Snippet kann alle Anker-Links aus einem HTML-Block ziehen und den rel =”nofollow” Attribut zu jedem Element. Der Entwickler, der diesen Code geschrieben hat, war so freundlich, den rohen Ausdruck und ein Arbeitsbeispiel in PHP zu veröffentlichen.

29. Medienabfragespiel

/ @ media ([^ ] +) \ ([\ s \ S] +?) \ s * / g

Teilen Sie CSS-Medienabfragen in ihre Parameter und Eigenschaften auf. Auf diese Weise können Sie externes CSS auf eine sauberere Art und Weise analysieren und sich direkt auf die Funktionsweise des Codes konzentrieren. (Quelle)

30. Google-Suchsyntax

/([+- ×???????????????????????????????????????????????????????????????????????????????

Sie können Ihren eigenen Regex-Code erstellen, um durchsuchbaren Text mit der Markensyntax von Google zu bearbeiten. Das Pluszeichen (+) kennzeichnet zusätzliche Schlüsselwörter und das Minuszeichen (-) Wörter, die ignoriert und aus den Ergebnissen entfernt werden sollen.

Es ist ein ziemlich kompliziertes Snippet, kann aber bei richtiger Verwendung als Grundlage für den Aufbau eines eigenen Suchalgorithmus dienen. (Quelle)

Einpacken

Der Weg zur Regex-Beherrschung ist lang, aber lohnenswert, wenn Sie dabei bleiben. Neben den üblichen Regex-Werkzeugen können Sie am besten durch Wiederholung studieren. Erstellen Sie Webanwendungen, die auf diesen Regex-Ausschnitten basieren, um zu erfahren, wie sie in einer wirklich funktionierenden Webanwendung funktionieren. Und wenn Sie andere Ausschnitte vorschlagen möchten, können Sie sie im Kommentarbereich unten posten.

Jetzt lesen:

50 nützliche CSS-Ausschnitte, die jeder Designer haben sollte