Bernhard Häussner

Javascript Regular Expressions Beispiele

03.11.2009, 18:18

Viele Javascript-Tutorials zum RegExp-Objekt benutzen die RegExp.$1-Notation und andere unschöne Dinge. Außerdem gibt es mehrere nahezu äquivalente Funktionen, was Reguläre Ausdrücke angeht. Darum habe ich ein Bisschen herumgespielt mit den Funktionen S.match(R), R.exec(S), R.test(S), S.split(R), S.replace(R) und S.search(R). Hier ist die kleine Referenz mit viel Beispiel, mit der ich hoffe arbeiten zu können:

RegExp-Objekte erstellen

// short constructor
var regexp=/a(b?c)/i

// long constructor
var regexp=new RegExp("a(b?c)","i"):
// -> allows runtime configuration
var char="a";
var regexp=new RegExp(char+"(b?c)",'i');

In der Praxis wird man fast immer den kurzen Konstruktor verwenden. Manchmal lässt sich ein dynamisches Erstellen des RegExps vermeiden, indem man den Treffer überprüft.

Finden mit String.match(RegExp) und RegExp.exec(String)

// match: basic usage
"a".match(regexp);   //  null
"abc".match(regexp); // ["abc", "bc"]
// -> "i"-flag: caseinsensitive
"Ac".match(regexp));  // ["Ac", "c"]
"acb".match(regexp); // ["ac", "c"]

// exec: same but method of regexp
regexp.exec("a");   //  null
regexp.exec("abc"); // ["abc", "bc"]
regexp.exec("Ac");  // ["Ac", "c"]
regexp.exec("acb"); // ["ac", "c"]

Bis auf wenige Ausnahmen (siehe unten) sind die beiden Funktionen gleich. Zurückgegeben wird ein Array mit dem gesamten passenden Teil und den im regulären Ausdruck eingeklammerten Teilen.

Prüfen mit RegExp.test(String)

// test: just booleans
/^abc$/.test("abc"); // true
/^abc$/i.test("AbC"); // true
/^abc$/.test("abcd"); // false

Diese Funktion ist zum Validieren von Eingaben recht praktisch, wenn es nicht auf den Inhalt des Strings ankommt.

Teilen mit String.split(RegExp)

// split: arrayify stings
"a,b,c.d".split(/\.|,/) // ["a", "b", "c", "d"]
"a,.b- c .d_e".split(/[.,-_]/) // ["a", "", "b", " c ", "d", "e"]
"a,.b- c .d_e".split(/[.,-_\s]*/) // ["a", "b", "c", "d", "e"]

Das Teilen kann auch mit einem normalen String geschehen, aber mit einem RegExp lassen sich, wie in diesem Beispiel demonstriert erweitere Funktionen implementieren, wie mehrere mögliche Trennzeichen oder das kürzen von Whitespace und leeren Elementen.

Lokalisieren mit String.search(RegExp) und RegExpResult.index

// search: match position
"0123b56b".search(/b/g); // 4
"0123b56b".search(/x/g); // -1

// index: match position, too
/b/.exec("0123b56").index; // 4
"0123b56".match(/b/).index; // 4
// -> "g"-flag:global
/b/g.exec("0123b56b").index; // 4
"0123b56b".match(/b/g).index; // undefined

Interessant ist, dass match und global sich nicht vertragen. Irgenwie ist es schon eine rechte Eigenart dass sich gobale und nicht-globale Ausdrücke so startk unterscheiden, daher würde ich RegExp-Objekte nicht zu weit durch Methodenaufrufe schicken.

Ersetzen mit String.replace(RegExp,replacement)

// replace
var string="ab-ghi-abc-hl-ac"
string.match(regexp); // ["abc", "bc"]
string.replace(regexp,"#")); // "ab-ghi-#-hl-ac"

Globales Finden und Ersetzen

// more global
var regexp2=new RegExp(regexp.source,'g')
string.replace(regexp2,"#"); // "ab-ghi-#-hl-#"
string.match(regexp2); // ["abc", "ac"]
// loop like that:
regexp2.exec(string); // ["abc", "bc"]
regexp2.exec(string); // ["ac", "c"]]
regexp2.exec(string); // null
regexp2.exec(string); // ["abc", "bc"]

Hier unterscheiden sich match() und exec()! Während match() ein Array der allen Treffern aus den kompletten Trefferstellen liefert, liefert exec(), wie beim nicht-globalen, pro Fundstelle je ein Array inclusive Klammerstellen. Um mit exec() alle Treffer zu erhalten, kann man z.B. eine while-Schleife verwenden.

Backreferences

// backreferences
/([ab])c\1/.test("aca"); // true
/([ab])c\1/.test("bcb"); // true
/([ab])c\1/.test("bca"); // false

// replacement backreference
// notice 1-9 limitation
"ll mm kk kx a Bb lL".replace(/([lkb])\1/gi,"$12")
"l2 mm k2 kx a B2 l2"
// beyond 1-9
"abcdefghijklmnopqrst".replace(/(.)(.)(.)(.)(.)(.)(.)(.)(.)(.)(.)(.)(.)(.)(.)(.)/i,"$13-$1-$13+++") // "m-a-m+++qrst"
"abcdefghijklmnopqrst".replace(/(.)(?:.)(?:.)(?:.)(?:.)(?:.)(?:.)(?:.)(?:.)(?:.)(?:.)(?:.)(.)(?:.)(?:.)(?:.)/i,"$2-$1-$13+++") // "m-a-a3+++qrst"
// get a $
"ab".replace(/(.)/,"$$1") // $1b
"ab".replace(/(.)/g,"$$1") // $1$1
// special backrefs:
"abcdefg".replace(/(d)e/,"[ $`-$1-$' (inst $&) ]") // "abc[ abc-d-fg (inst de) ]fg"

Richtig interessante Dinge lassen sich machen mit Backreferences. Grundsätzlich können doppelte Vorkommen von passenden Teilen geprüft werden. Beim Ersetzen sind sie essenziell für Umformatierungen.

Spezialitäten

// special firefox shortcut:
/a/("cba") // a
/a(.)/("acbab") // ["ac", "c"]
// Ein Bonbon:
/\\/("\\")//["\"]
// Noch eines:
function _(é) {var ì=Array,í=RegExp,è=["join","length","replace"],î=[],_
="\x31",_=_*_,ë=_+_+_*_;for (var i=ë;i>=_;i--) {î[î[è[_]]]=("((\\\x64)"+
(new ì(i)[è[_-_]]("\\"+(ë-i+_)*(_+_)))+")");}var î=new í(î[è[_-_]]("|"),
"\x67"),ï=function(){var I=arguments;for(var i=ë;i>=_;i--){var j=(_+_)*(
ë+_-i);if(I[j]) {return i+I[j];}}},ì="",í=_+ì;for (i=_-_;i<é;i++) {ì+=(i
+"\x20"+í+"\n");í=í[è[_+_]](î,ï);}return ì;}alert(_(9));

Der Firefox-Shortcut könnte zwar praktisch sein, wird aber nicht von vielen Browsern unterstützt, und ist auch ein bisschen zu abstrakt.

Letztere Funktion benutzt Backreferences sowohl im RegExp als auch im Ersetzungstext, zudem ersetzt sie Rekursiv und baut das RegExp dynamisch. Außerdem habe ich sie ein bisschen verschlüsselt, da die Berechnung der ausgegebenen Zahlenreihe eigentlich ein Rätsel ist. Wenn man allerdings weiß, dass ich RegExp verwende, fällt die Lösung leichter, und wenn man es gelöst hat, weiß man vielleicht auch warum es ein perfekter Vorwand ist, um sich etwas mit Regulären Ausdrücken zu beschäftigen.

Such-Wiki zu „javascript regexp“

Kurze URL http://1-co.de/b/1T. Post to twitter

Kommentare

Luca meint: (#214)
27.12.2009, 19:32

Jetzt weiß ich wieder, warum ich Regex's hasse. Aber danke für den Überblick!

Werde mich da mal weiter einlesen müssen. Ich verschieb das immer wieder, aber der Artikel hat mich ein wenig motiviert :)

Bernhard H. meint: (#216)
27.12.2009, 21:18

Regex hassen? Ist zwar fast so esoterisch wie Altgriechisch aber nicht minder nützlich ;)

Zugegeben, die Javascript-Funktionen dazu sind etwas kompliziert, aber an sich kann man mit Regexps sehr komfortabel mit Zeichenketten arbeiten.

Manchmal vermisse ich in Ruby die ganzen leicht hässlichen aber einfachen PHP-Helferlein zu strings. Mit regulären Ausdrücken jedoch lässt sich in (fast) jeder Programmiersprache einiges machen. Sich zumindest daran zu gewöhnen lohnt sich also sehr wahrscheinlich.
Hier ist eine praktische Übersicht/Kurzeinführung: http://de.autohotkey.com/docs/misc/RegEx-QuickRef.htm






 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zu dieser Seite: http://1-co.de/b/1T