30 Regex Code Snippets Alle Web-Entwickler sollten wissen

Reguläre Ausdrücke sind ein mächtiges Werkzeug, das in jedem Werkzeug des Entwicklers enthalten sein sollte. Sie können anhand sehr komplexer Parameter mit einer Zeichenfolge verglichen werden, wodurch beim Erstellen dynamischer Websites viel Zeit gespart werden kann.

Webentwickler sehen sich anderen Aufgaben gegenüber als Softwareentwickler, aber viele der gleichen Code-Grundlagen bleiben bestehen. Reguläre Ausdrücke (oder Regex ) haben eine steile anfängliche Lernkurve, aber sie können bei richtiger Anwendung enorm mächtig sein .

Der schwierigste Teil ist das Erlernen der Syntax und lernen, wie man seinen eigenen Regex-Code von Grund auf neu schreibt. Um Zeit zu sparen, habe ich 30 verschiedene Regex-Code-Snippets organisiert, die Sie in Entwicklungsprojekte einbinden können. Und da Regex nicht auf eine einzige Sprache beschränkt ist, können Sie diese Snippets auf alles von JavaScript bis PHP oder Python anwenden.

1. Passwortstärke

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

Das Überprüfen der Stärke eines Passworts ist oft subjektiv, daher gibt es keine absolut richtige Antwort. Aber ich finde, dass dieses Regex-Snippet ein guter Ausgangspunkt ist, wenn Sie Ihren eigenen Passwort-Checker nicht von Grund auf neu schreiben möchten.

2. Hexadezimale Farbe

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

Der Bereich der Web-Entwicklung ist allgegenwärtig mit Hex-Farbcodes. Dieses Regex-Snippet kann verwendet werden, um Hex-Code-Übereinstimmungen für einen beliebigen Zweck aus einer beliebigen Zeichenfolge zu ziehen.

3. Überprüfen Sie die E-Mail-Adresse

 /[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[AZ]{2, 4}/igm 

Eine der häufigsten Aufgaben für einen Entwickler besteht darin, zu überprüfen, ob eine Zeichenfolge im Stil einer E-Mail-Adresse formatiert ist. Es gibt viele verschiedene Varianten, um diese Aufgabe zu erfüllen, daher bietet dieser SitePoint-Link zwei verschiedene Code-Snippets zum Überprüfen der E-Mail-Syntax gegen eine Zeichenfolge.

4. IPv4-Adresse

 /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3} (?: 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) \ B / 

Ähnlich 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.

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 -afA-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 eine Adresse für die neuere IPv6-Syntax mit diesem erweiterten Regex-Snippet überprüfen. Der Unterschied ist gering, wenn auch während der Entwicklung.

6. Tausendertrennzeichen

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

Herkömmliche Nummerierungssysteme erfordern ein Komma, Punkt oder irgendeine andere Markierung für jede dritte Ziffer in einer größeren Zahl. Dieser Regex-Code arbeitet mit einer beliebigen Zahl und wendet jede von Ihnen gewählte Markierung auf jede dritte Ziffer an, die sich in Tausende, Millionen usw. aufteilt.

7. Stellen Sie HTTP dem Hyperlink voran

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

Ob Sie in 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, wird sie entsprechend vorangestellt.

8. Ziehen Sie die Domain aus der URL

 /https?:\/\/(?:[-\w]+\.)?([-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"> 

Jede Websitedomain enthält das initiale Protokoll (HTTP oder HTTPS) und oft eine Subdomain plus den zusätzlichen Seitenpfad. Sie können dieses Snippet verwenden, um alles durchzuschneiden und nur den Domainnamen ohne zusätzliche Extras zurückzugeben.

9. Sortieren Sie Stichwörter nach Word Count

 ^ [^ \ s] * $ stimmt genau mit 1-Wort-Schlüsselwort überein ^ [^ \ s] * \ s [^ \ s] * $ entspricht exakt dem 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 3-Wort-Schlüsselwort ^ ([^ \ s] * \ s ) {4} [^ \ s] * $ entspricht 5-Wörter-und-mehr-Keywords (Longtail) 

Nutzer von Google Analytics und Webmaster-Tools werden diesen regulären Ausdruck wirklich genießen. Es kann Keywords basierend auf der Anzahl der Wörter in einer Suche sortieren und organisieren.

Dies kann numerisch spezifisch sein (dh nur 5 Wörter) oder es kann mit einer Reihe von Wörtern (dh 2 oder mehr Wörter) übereinstimmen. Wenn es zum Sortieren von Analysedaten verwendet wird, ist dies ein mächtiger Ausdruck.

10. Suchen Sie eine gültige Base64-Zeichenfolge in PHP

 \? 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 zu einem bestimmten Zeitpunkt möglicherweise Code durchsuchen, der nach Base64-codierten binären Objekten sucht. Dieses Snippet kann auf den gesamten PHP-Code angewendet werden und prüft auf vorhandene Base64-Strings.

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 validiert jede herkömmliche Telefonnummern-Syntax, die hauptsächlich auf dem amerikanischen Stil von Telefonnummern basiert.

Da dies zu einem relativ komplizierten Thema werden kann, empfehle ich, diesen Stack-Thread für detailliertere Antworten zu verwenden.

12. Leading & Trailing Whitespace

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

Verwenden Sie dieses Code-Snippet, um führende / nachfolgende Leerzeichen aus einer Zeichenfolge herauszuziehen. Dies ist möglicherweise keine große Sache, aber manchmal kann es sich auf die Ausgabe auswirken, wenn es aus einer Datenbank abgerufen oder auf eine andere Dokumentcodierung angewendet wird.

13. Bildquelle ziehen

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

Wenn Sie aus irgendeinem Grund die Quelle eines Bildes direkt aus HTML herausziehen müssen, ist dieses Code-Snippet die perfekte Lösung. Obwohl es im Backend reibungslos läuft, sollten Frontend-JS-Entwickler stattdessen auf die jQuery-Methode .attr () für das Frontend zurückgreifen.

14. Validieren Sie das Datum im Format TT / MM / JJJJ

 ^ (? :( ?: 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 nur als Zahlen mit unterschiedlichen Formaten angezeigt werden können. PHP hat eine fantastische Datumsfunktion, aber das ist nicht immer die beste Wahl, wenn man eine rohe Zeichenkette zieht. Verwenden Sie stattdessen diesen regulären Ausdruck, der für diese spezifische Datumssyntax erstellt wurde.

15. YouTube Video ID Übereinstimmung

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

YouTube hat die gleiche URL-Struktur seit Jahren beibehalten, weil es einfach funktioniert. Es ist auch die beliebteste Video-Sharing-Website im Internet, sodass YouTube-Videos die meisten Zugriffe verzeichnen.

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

16. Gültige ISBN

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

Gedruckte Bücher folgen einem System der Nummerierung, das als ISBN bekannt ist. Dies kann ziemlich schwierig werden, wenn Sie Unterschiede zwischen ISBN-10 und ISBN-13 berücksichtigen.

Mit diesem unglaublichen Snippet können Sie jedoch eine ISBN-Nummer validieren und prüfen, ob sie ISBN10 oder 13 ist. Der gesamte Code ist in PHP geschrieben, daher sollte sich dies für Webentwickler als außerordentlich nützlich erweisen.

17. Überprüfen Sie die Postleitzahl

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

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

Denken Sie daran, dass dies in erster Linie für das amerikanische System von Postleitzahlen gemeint ist, so dass dies Anpassungen für andere Länder erfordern kann.

18. Gültiger Twitter-Benutzername

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

Hier ist ein sehr kleines Code-Snippet für den Abgleich mit den Twitter-Nutzernamen in einer Zeichenfolge. Es wird nach @mention- Syntax gesucht, die perfekt ist, um automatisch den Inhalt eines Tweets (oder Tweets) zu scannen.

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 (?: 0 [0-5] | [68] [0-9 ]) [0-9] {11} | (?: 2131 | 1800 | 35 \ d {3}) \ d {11}) $ 

Zum Überprüfen einer Kreditkartennummer ist häufig eine sichere Plattform erforderlich, die an anderer Stelle online gehostet wird. Aber Regex kann für die minimalen Anforderungen einer typischen Kreditkartennummer verwendet werden.

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

20. Suchen Sie CSS-Attribute

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

Es mag sehr selten sein, Regex über CSS auszuführen, aber es ist auch keine unglaublich merkwürdige Situation.

Dieses Code-Snippet kann verwendet werden, um alle übereinstimmenden CSS-Eigenschaften und -Werte von einzelnen Selektoren abzurufen. Es kann aus verschiedenen Gründen verwendet werden, um CSS-Abschnitte anzuzeigen oder doppelte Eigenschaften zu entfernen.

21. Strip HTML-Kommentare

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

22. Facebook Profil URL

 /(?http:\/\/)?(?:www.)?facebook\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"> (?: [\ w \ -] * \ /) * ([\ w \ -] *) / 

Facebook ist unglaublich beliebt und hat viele verschiedene URL-Schemata durchlaufen. In einer Situation, in der Sie Profil-URLs von Benutzern verwenden, ist es möglicherweise hilfreich, Strings zu analysieren und sicherzustellen, dass sie ordnungsgemäß strukturiert sind. Dieser Ausschnitt kann genau das und ist perfekt für alle Links im FB-Stil.

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

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

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

Dieses Snippet kann in JavaScript verwendet werden, um einen Browser-Agenten zu testen, basierend darauf, welche Version von Internet Explorer (5-11) verwendet wird.

24. Auszugspreis

 /(\$[0-9, ]+(\.[0-9]{2})))/ 

Die Preise werden in verschiedenen Formaten angezeigt, die Dezimalzahlen, Kommas und Währungssymbole enthalten. Dieser reguläre Ausdruck kann alle diese verschiedenen Formate prüfen, um einen Preis aus einer beliebigen Zeichenkette zu ziehen.

25. Parsen Sie den E-Mail-Header

 /\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[AZ]{2, 6}\b/i 

Mit dieser einzelnen Codezeile können Sie einen E-Mail-Header analysieren, um "to" Informationen aus dem Header herauszuziehen. Es kann zusammen mit mehreren miteinander verbundenen E-Mails verwendet werden.

Wenn Sie eine Regex für diese Aufgabe vermeiden möchten, können Sie stattdessen auf eine Parsing-Bibliothek zurückgreifen.

26. Ordne einen bestimmten Dateityp zu

 /^(.*\.(?!(htm|html|class|js)$)))?[^.]*$/i 

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

27. Passen Sie eine URL-Zeichenfolge an

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

Dieser Ausschnitt kann sowohl für HTTPS- als auch für HTTP-Zeichenfolgen verwendet werden, um zu überprüfen, ob der Text der herkömmlichen TLD-Domänensyntax entspricht. Es gibt auch eine einfache Implementierung dieser Regex mit JavaScript RegExp.

28. Füge rel = "nofollow" zu Links hinzu

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

Wenn Sie mit einem Batch von HTML-Code arbeiten, kann es schaurig sein, manuelle Arbeit auf sich wiederholende Aufgaben anzuwenden. Reguläre Ausdrücke sind perfekt für diesen Anlass und sie sparen eine Menge Zeit.

Dieses Snippet kann alle Ankerverknüpfungen aus einem HTML-Block ziehen und das Attribut rel = "nofollow" an jedes Element anhängen. Der Entwickler, der diesen Code geschrieben hat, war so freundlich, den rohen Ausdruck plus ein funktionierendes Beispiel in PHP zu veröffentlichen.

29. Medienabfrage-Übereinstimmung

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

Teilen Sie CSS-Medienabfragen in ihre Parameter und Eigenschaften auf. Dies kann Ihnen dabei helfen, externes CSS sauberer zu analysieren, indem Sie sich direkter auf die Funktionsweise des Codes konzentrieren.

30. Google-Suche Syntax

 /([+-]?(?:'.+?'|".+?"|[^+\-] {1} [^] *)) / g 

Sie können Ihren eigenen Regex-Code zum Manipulieren von durchsuchbarem Text mithilfe der Google-Marken-Syntax erstellen. Das Pluszeichen (+) kennzeichnet zusätzliche Schlüsselwörter und das Minuszeichen (-) kennzeichnet Wörter, die ignoriert und aus den Ergebnissen entfernt werden sollen.

Es ist ein ziemlich kompliziertes Snippet, aber wenn es richtig verwendet wird, kann es eine Basis für die Erstellung eines eigenen Suchalgorithmus bieten.

Einpacken

Der Weg zum Regex ist lang, aber lohnend, wenn du dabei bleibst. Abgesehen von typischen Regex-Tools ist der beste Weg zu studieren durch Wiederholung. Erstellen Sie Webanwendungen, die auf diesen Regex-Snippets basieren, um zu erfahren, wie sie in einer wirklich funktionierenden Webanwendung funktionieren. Und wenn Sie andere Snippets haben, die Sie vorschlagen können, können Sie sie im Kommentarbereich unten posten.

Jetzt lesen: 50 nützliche CSS-Snippets, die jeder Designer haben sollte

10 CSS-Bibliotheken für bessere Bild-Hover-Effekte

Es ist ein wichtiger Teil des UX-Designs, dass Nutzer einfach und klar erkennen können, welcher Teil der Webseite anklickbar ist. Die alte aber goldene Art, dies zu tun, war, die Textfarbe zu ändern und zu unterstreichen. Heutzutage gibt es mit CSS viele Möglichkeiten, Hover-Effekte, insbesondere für Bilder, zu liefern.Ent

(Tech- und Design-Tipps)

Wie bekomme ich Goodreads-Bewertungen über API?

Für Buchliebhaber, die ein bestimmtes Genre mögen, werden sie wahrscheinlich die Empfehlung eines Freundes überprüfen, anstatt einer Bestsellerliste zu folgen. Aus diesem Grund ist Amazon Goodreads eine Lesezeichen-Website für begeisterte Leser. Es ist ein Ort, wo Sie eine umfangreiche Datenbank von Büchern, Empfehlungen und Bewertungen von Kollegen Buchliebhaber finden können.Goodre

(Tech- und Design-Tipps)