Share
Reguläre Ausdrücke können beängstigend sein… wirklich beängstigend. Glücklicherweise lässt die Angst schnell nach, sobald Sie sich einprägen, was jedes Symbol darstellt. Wenn Sie in den Titel dieses Artikels passen, gibt es viel zu lernen! Lass uns anfangen.
Der Schlüssel zum Erlernen der effektiven Verwendung regulärer Ausdrücke besteht darin, sich einfach einen Tag zu nehmen und alle Symbole auswendig zu lernen. Dies ist der beste Rat, den ich Ihnen bieten kann. Setzen Sie sich, erstellen Sie Flash-Karten, und merken Sie sich diese einfach! Hier sind die häufigsten:
Ja, es macht keinen Spaß, aber einfach auswendig lernen. Sie werden dankbar sein, wenn Sie es tun!
Sie können sicher sein, dass Sie Ihre Haare an einem Punkt oder an einem anderen Punkt ausreißen möchten, wenn ein Ausdruck nicht funktioniert, unabhängig davon, wie viel dies auch sein sollte - oder Sie meinen, es müsste es! Das Herunterladen der RegExr Desktop-App ist unerlässlich und macht Spaß. Neben der Echtzeitprüfung bietet es auch eine Seitenleiste, in der die Definition und Verwendung jedes Symbols beschrieben wird. Lade es herunter!.
Im nächsten Schritt lernen Sie, wie Sie diese Symbole tatsächlich verwenden können! Wenn das Video Ihre Präferenz ist, haben Sie Glück! Sehen Sie sich die fünf Lektions-Videoserien "Reguläre Ausdrücke für Dummies" an.
In diesem letzten Abschnitt werden einige der wichtigsten JavaScript-Methoden für das Arbeiten mit regulären Ausdrücken beschrieben.
Dieser akzeptiert einen einzelnen String-Parameter und gibt einen booleschen Wert zurück, der angibt, ob eine Übereinstimmung gefunden wurde. Wenn Sie nicht unbedingt eine Operation mit einem bestimmten übereinstimmenden Ergebnis durchführen müssen, beispielsweise bei der Überprüfung eines Benutzernamens, erledigt "test" die Aufgabe.
var username = 'JohnSmith'; alert (/ [A-Za-z _-] + /. test (Benutzername)); // gibt true zurück
Oben beginnen wir mit der Definition eines regulären Ausdrucks, der nur Groß- und Kleinbuchstaben, einen Unterstrich und einen Bindestrich erlaubt. Wir packen diese akzeptierten Zeichen in Klammern, was a bezeichnet Zeichenklasse. Das "+" - Symbol, mit dem fortgefahren wird, bedeutet, dass wir nach einem oder mehreren der vorangehenden Zeichen suchen. Wir testen dieses Muster dann gegen unsere Variable "JohnSmith". Da es eine Übereinstimmung gab, zeigt der Browser ein Benachrichtigungsfeld mit dem Wert "true" an.
Sie sind wahrscheinlich bereits mit der Split-Methode vertraut. Es akzeptiert einen einzelnen regulären Ausdruck, der angibt, wo die "Aufteilung" erfolgen soll. Bitte beachten Sie, dass wir auch eine Zeichenfolge verwenden können, wenn wir dies vorziehen.
var str = 'das ist meine Zeichenfolge'; alert (str.split (/ \ s /)); // Warnungen "this, is, my, string"
Durch das Übergeben von "\ s", das ein einzelnes Leerzeichen darstellt, haben wir jetzt unsere Zeichenfolge in ein Array aufgeteilt. Wenn Sie auf einen bestimmten Wert zugreifen müssen, hängen Sie einfach den gewünschten Index an.
var str = 'dies ist mein String'; alert (str.split (/ \ s /) [3]); // Warnungen "Zeichenfolge"
Wie zu erwarten, können Sie mit der "replace" -Methode einen bestimmten Textblock, dargestellt durch eine Zeichenfolge oder einen regulären Ausdruck, durch eine andere Zeichenfolge ersetzen.
Wenn wir die Zeichenfolge "Hello, World" in "Hello, Universe" ändern möchten, können Sie Folgendes tun:
var someString = 'Hallo, Welt'; someString = someString.replace (/ World /, 'Universe'); alert (someString); // Warnungen "Hallo, Universum"
Es sei darauf hingewiesen, dass wir für dieses einfache Beispiel einfach .replace ('Welt', 'Universum') verwenden konnten. Bei Verwendung der replace-Methode wird der Wert der Variablen nicht automatisch überschrieben. Der zurückgegebene Wert muss der Variablen someString erneut zugewiesen werden.
Nehmen wir als Beispiel an, wir möchten einige elementare Sicherheitsvorkehrungen treffen, wenn sich ein Benutzer für unsere fiktive Website anmeldet. Vielleicht möchten wir ihren Benutzernamen nehmen und alle Symbole, Anführungszeichen, Semikolons usw. entfernen. Die Ausführung einer solchen Aufgabe ist mit JavaScript und regulären Ausdrücken trivial.
var username = 'J; ohnSmith; @%'; username = Benutzername.replace (/ [^ A-Za-z \ d _-] + /, "); alert (Benutzername); // JohnSmith; @%
Angesichts des erzeugten Alert-Werts könnte davon ausgegangen werden, dass in unserem Code ein Fehler aufgetreten ist (den wir in Kürze überprüfen werden). Dies ist jedoch nicht der Fall. Wenn Sie feststellen, wurde das Semikolon unmittelbar nach dem "J" wie erwartet entfernt. Um der Engine zu sagen, dass sie die Zeichenfolge nach weiteren Übereinstimmungen durchsuchen soll, fügen Sie direkt nach unserem schließenden Schrägstrich ein "g" hinzu. dieser Modifikator oder Flagge, steht für "global". Unser überarbeiteter Code sollte jetzt so aussehen:
var username = 'J; ohnSmith; @%'; username = username.replace (/ [^ A-Za-z \ d _-] + / g, "); alert (Benutzername); // alarmiert JohnSmith
Nun durchsucht der reguläre Ausdruck die ENTIRE-Zeichenfolge und ersetzt alle erforderlichen Zeichen. Den aktuellen Ausdruck überprüfen - .ersetzen (/ [^ A-Za-z \ d _-] + / g, "); - Es ist wichtig, das Karottensymbol in den Klammern zu beachten. Innerhalb einer Zeichenklasse bedeutet dies "Finde alles, was NICHT IST ...". Wenn wir jetzt noch einmal lesen, heißt es, etwas finden, das NICHT aus einem Buchstaben, einer Zahl (dargestellt durch \ d), einem Unterstrich oder einem Bindestrich besteht ; Wenn Sie eine Übereinstimmung finden, ersetzen Sie sie durch nichts oder löschen Sie das Zeichen vollständig.
Im Gegensatz zur "test" -Methode gibt "match ()" ein Array mit den gefundenen Übereinstimmungen zurück.
var name = 'JeffreyWay'; alert (name.match (/ e /)); // Warnungen "e"
Der obige Code gibt ein einzelnes "e" aus. Beachten Sie jedoch, dass sich in der Zeichenfolge "JeffreyWay" tatsächlich zwei Es befinden. Wir müssen erneut den Modifizierer "g" verwenden, um ein "zu deklarieren".Gglobale Suche.
var name = 'JeffreyWay'; alert (name.match (/ e / g)); // Warnungen "e, e"
Wenn wir dann einen dieser spezifischen Werte mit dem Array alarmieren möchten, können wir nach den Klammern auf den gewünschten Index verweisen.
var name = 'JeffreyWay'; alert (name.match (/ e / g) [1]); // Warnungen "e"
Sehen wir uns ein weiteres Beispiel an, um sicherzustellen, dass wir es richtig verstehen.
var string = 'Dies ist nur eine Zeichenkette mit einigen 12345 und einigen! @ # $ eingemischt.'; alert (string.match (/ [a-z] + / gi)); // alerts "Dies ist nur eine Zeichenfolge mit einigen, und einige gemischt, in"
Innerhalb des regulären Ausdrucks haben wir ein Muster erstellt, das mit einem oder mehreren Groß- oder Kleinbuchstaben übereinstimmt - dank des Modifikators "i". Wir fügen auch das "g" an, um eine globale Suche zu deklarieren. Der obige Code gibt folgende Warnung aus: "Dies ist nur eine Zeichenfolge, einige, und einige, die gemischt werden." Wenn wir einen dieser Werte innerhalb des Arrays innerhalb einer Variablen abfangen möchten, referenzieren wir nur den korrekten Index.
var string = 'Dies ist nur eine Zeichenkette mit einigen 12345 und einigen! @ # $ eingemischt.'; var entspricht = string.match (/ [a-z] + / gi); Alarm (Übereinstimmungen [2]); // Warnungen "nur"
Versuchen wir, die E-Mail-Adresse [email protected] in ihren jeweiligen Benutzernamen und Domainnamen aufzuteilen: "nettuts" und "tutsplus".
var email = '[email protected]'; alert (email.replace (/ ([a-z \ d _-] +) @ ([a-z \ d _-] +) \. [a-z] 2,4 / ig, '$ 1, $ 2')); // alarmiert "nettuts, tutsplus"
Wenn Sie reguläre Ausdrücke noch nicht kennen, kann der obige Code etwas abschreckend wirken. Keine Sorge, das war für uns alle gleich, als wir anfingen. Wenn Sie es jedoch in Teilmengen zerlegen, ist es wirklich ganz einfach. Nehmen wir es Stück für Stück.
.Ersetzen Sie (/ ([a-z \ d _-] +)
Von der Mitte aus suchen wir nach Buchstaben, Ziffern, Unterstrichen oder Bindestrichen und passen auf einen oder mehrere von ihnen (+). Wir möchten auf den Wert dessen, was hier passt, zugreifen, also wickeln wir ihn in Klammern ein. Auf diese Weise können wir später auf diesen abgeglichenen Satz verweisen!
@ ([a-z \ d _-] +)
Suchen Sie unmittelbar nach dem vorhergehenden Treffer das @ -Zeichen und einen weiteren Satz von Buchstaben, Zahlen, Unterstrichen und Bindestrichen. Wiederum wickeln wir den Satz in Klammern, um später darauf zugreifen zu können.
\. [a-z] 2,4 / ig,
Wenn wir fortfahren, finden wir eine einzelne Periode (wir müssen sie mit "\" abkoppeln, da sie in regulären Ausdrücken mit jedem Zeichen übereinstimmt (manchmal ohne Zeilenumbruch). Der letzte Teil besteht darin, ".com" zu finden. "Wir wissen, dass die Mehrheit der Domänen, wenn nicht alle, einen Suffixbereich von zwei bis vier Zeichen haben (com, edu, net, name usw.). Wenn wir diesen bestimmten Bereich kennen, können wir auf die Verwendung von generischere Symbole wie * oder + und stattdessen die beiden Zahlen in geschweifte Klammern einschließen, die jeweils das Minimum und das Maximum darstellen.
'$ 1, $ 2')
Dieser letzte Teil stellt den zweiten Parameter der Ersetzungsmethode dar oder was wir mit den übereinstimmenden Mengen ersetzen möchten. Hier verwenden wir $ 1 und $ 2, um auf das zu verweisen, was in den ersten bzw. zweiten Klammern gespeichert wurde. In diesem speziellen Fall bezieht sich "$ 1" auf "Nettuts" und "2" auf "Tutsplus".
Für unser abschließendes Projekt replizieren wir das Standortobjekt. Für diejenigen, die nicht vertraut sind, stellt Ihnen das Standortobjekt Informationen über die aktuelle Seite zur Verfügung: Href, Host, Port, Protokoll usw. Bitte beachten Sie, dass dies nur der Praxis dient. Verwenden Sie in einer realen Site einfach das bereits vorhandene Standortobjekt!
Wir beginnen zunächst mit der Erstellung unserer Standortfunktion, die einen einzelnen Parameter akzeptiert, der die URL darstellt, die wir "decodieren" möchten. wir nennen es "loc".
Funktion loc (URL)
Nun können wir es so nennen und eine Kauderwelsch-URL eingeben:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anotherval#theHashGoesHere'); Als Nächstes müssen wir ein Objekt zurückgeben, das eine Handvoll Methoden enthält.
Funktionslok (URL) Rückkehr
Obwohl wir nicht alle erstellen werden, ahmen wir eine Handvoll oder so nach. Der erste wird "Suche" sein. Mit regulären Ausdrücken müssen wir die URL durchsuchen und alles innerhalb der Querzeichenfolge zurückgeben.
return search: function () return url.match (/\?(.+)/ i) [1]; // gibt "somekey = somevalue & anotherkey = anothervalue # theHashGoesHere" zurück
Oben nehmen wir die übergebene URL und versuchen, unsere regulären Ausdrücke mit der URL zu vergleichen. Dieser Ausdruck durchsucht die Zeichenfolge nach dem Fragezeichen, das den Beginn unserer Abfragenzeichenfolge darstellt. An diesem Punkt müssen wir die restlichen Zeichen einfangen, weshalb (. +) ist in Klammern eingeschlossen. Schließlich müssen wir nur diesen Block von Zeichen zurückgeben, also verwenden wir [1], um ihn als Ziel festzulegen.
Jetzt erstellen wir eine andere Methode, die den Hash der URL oder irgendetwas nach dem Nummernzeichen zurückgibt.
hash: function () return url.match (/#(.++/ )/i) [1]; // gibt "theHashGoesHere" zurück,
Diesmal suchen wir nach dem Nummernzeichen und fangen die folgenden Zeichen noch einmal in Klammern, sodass wir nur auf diese bestimmte Teilmenge verweisen können - mit [1].
Die Protokollmethode sollte das von der Seite verwendete Protokoll zurückgeben - normalerweise "http" oder "https".
protocol: function () return url.match (/ (ht | f) tps?: / i) [0]; // gibt 'http:' zurück,
Dies ist etwas komplizierter, nur weil es einige Optionen gibt, die Sie ausgleichen können: http, https und ftp. Obwohl wir sowas machen könnten - (http | https | ftp) - es wäre sauberer zu tun: (ht | f) tps?
Dies bedeutet, dass wir zuerst entweder ein "ht" oder das "f" Zeichen finden sollten. Als Nächstes passen wir die "tp" -Zeichen an. Das abschließende "s" sollte optional sein, daher fügen wir ein Fragezeichen an, das darauf hinweist, dass das vorangehende Zeichen möglicherweise null oder eine Instanz enthält. Viel schöner.
Der Kürze halber wird dies unser letzter sein. Es wird einfach die URL der Seite zurückgegeben.
href: function () return url.match (/ (. + \. [a-z] 2,4) / ig); // gibt "http://www.somesite.com" zurück
Hier stimmen wir alle Zeichen bis zu dem Punkt überein, an dem wir einen Punkt finden, auf den zwei bis vier Zeichen folgen (für com, au, edu, name usw.). Es ist wichtig zu wissen, dass wir diese Ausdrücke so kompliziert oder so einfach gestalten können, wie wir möchten. Es hängt alles davon ab, wie streng wir sein müssen.
function loc (url) return suche: function () return url.match (/\?(.+)/ i) [1]; , hash: function () return url.match (/#(.++/ )/ i) [1]; , protocol: function () return url.match (/ (ht | f) tps?: /) [0]; , href: function () return url.match (/ (. + \. [a-z] 2,4) / ig);
Wenn diese Funktion erstellt wurde, können wir jeden Unterabschnitt auf folgende Weise meldet
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alert (l.href ()); // http://www.net.tutsplus.com alert (l.protocol ()); // http:… etc. Danke fürs Lesen! Ich bin Jeffrey Way… ich melde mich ab.
