JavaScript regex - Einführung und Beispiele

 

Nachdem die Regex-Syntax für alle gängigen Skriptsprachen verwendet werden kann, habe ich die Beispiele des Grundlagen-Artikels in diesem Artikel mit JavaScript getestet. Die Ergebnisse dieses Beitrages, des console.log - Output, werden während des Ladens der Seite vom Browser interpretiert.

Die hier angeführten Beispiele können einfach in der Browser-Konsole getestet werden. Dazu ein Rechtsklick auf den Hintergrund und auf Untersuchen: Console

Die Beispiele können einfach in die Console kopiert und ausgeführt werden:

Zeichengruppen

Die folgenden Beispiele stammen von unserem Artikel zu den Regex-Grundlagen und werden dort beschrieben und erklärt, siehe Regex: Zeichengruppen - Zeichenauswahl. Auf dieser Seite wurden alle Beispiele mit JavaScript getestet und dokumentiert:

text - match

var string= "ich lerne Regex";
var search= "lerne";
console.log(string.match(search));
console.log Ausgabe: 
lerne

[abc] - match

var string = "abcdefghijk...";
var search= "[abc]";
console.log(string.match(search));
console.log Ausgabe: 
a

[abc] - matchAll

var string= "abcdefghijk...";
var search= "[abc]";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
a
b
c

[a-z] - matchAll

var string= "abcdefghijklmnopqrstuvwxyz";
var search= "[a-e]";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
a
b
c
d
e

Alle Zeichen außer den angeführten - matchAll

var string= "abcde";
var search= "[^abc]";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
d
e

Zahl, Punkt oder Minus - matchAll

var string= "Text mit 1-3.123";
var search= "[0-9\.\-]";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
1
-
3
.
1
2
3

([ab])([cd]) - matchAll

var string= "abcdefgh";
var search= "([ab])([cd])";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
bc

a|b - matchAll

var string= "abcdefgh";
var search= "a|b";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
a
b

Symbole die kein Buchstabe oder keine Zahl sind - matchAll

var string= "ab!cdefg?h";
var search= "[^A-Za-z0-9]";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
!
?

Zeichenklassen

Auch die Beispiele zu den Zeichenklassen stammen von unserem Artikel zu den Regex-Grundlagen und werden dort beschrieben und erklärt, siehe Regex: Zeichenklassen. 

alphanumerische Zeichen - matchAll

var string= "String";
var search= ".";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
S
t
r
i
n
g

Dezimalziffer  - matchAll

var string= "A847";
var search= "\\d";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
8
4
7

keine Dezimalziffer - match

var string= "A847";
var search= "\\D";
console.log(string.match(search)[0]);
console.log Ausgabe: 
A

ein Buchstabe, Zahl oder Unterstrich - matchAll

var string= "B??spiel";
var search= "\\w";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
B
s
p
i
e
l

kein Buchstabe, Zahl oder Unterstrich - matchAll

var string= "B%?spiel";
var search= "\\W";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
%
?

Leerzeichen - matchAll

var string= "Beispiel String";
var search= "\\s";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe:

kein Leerzeichen - matchAll

var string= "Beispiel String";
var search= "\\S";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
B
e
i
s
p
i
e
l
S
t
r
i
n
g

Quantifizierer

Auch hier, siehe Regex-Grundlagen, bzw. Regex: Quantifizierer. 

+ - match

var string= "String";
var search= "[A-Z]+";
console.log(string.match(search)[0]);
console.log Ausgabe: 
S

* - match

var string= "String";
var search= ".*";
console.log(string.match(search)[0]);
console.log Ausgabe: 
String

? - match

var string= "String";
var search= "[A-Z]?";
console.log(string.match(search)[0]);
console.log Ausgabe: 
S

{} - matchAll

var string= "String";
var search= ".{3}";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
Str
ing

Greedy vs Non-Greedy oder Lazy Matching

siehe Regex-Grundlagen, bzw. Regex: Greedy vs Non-Greedy oder Lazy Matching. 

Standard: Greedy

var string= "<html><head></head><body><h1>First Headline</h1><p>Text</p><h1>Second Headline</h1></body></html>";
var search= "<h1>(.*)</h1>";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
<h1>First Headline</h1><p>Text</p><h1>Second Headline</h1>

Non-Greedy oder Lazy Matching:

var string= "<html><head></head><body><h1>First Headline</h1><p>Text</p><h1>Second Headline</h1></body></html>";
var search= "<h1>(.*?)</h1>";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
<h1>First Headline</h1>
<h1>Second Headline</h1>

Ergebnis-Gruppe 1:

var string= "<html><head></head><body><h1>First Headline</h1><p>Text</p><h1>Second Headline</h1></body></html>";
var search= "<h1>(.*?)</h1>";
for (match of string.matchAll(search)) {
     console.log(`${match[1]}`);
}
console.log Ausgabe: 
First Headline
Second Headline

Anker - Anchors

Erklärungen und Details, siehe Regex-Grundlagen und Regex: Anker. 

^ - zu Beginn eines Strings suchen

var string= "Beispiel-String";
var search= "^[A-Za-z]";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
B

$ - am Ende eines Strings suchen

var string= "Beispiel-String";
var search= "[A-Za-z]$";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
g

Der Treffer muss an einer Wortgrenze auftreten

var string= "Beispiel-String";
var search= "[A-Za-z]\\B";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
B
e
i
s
p
i
e
S
t
r
i
n

Gruppieren

Erklärungen und Details, siehe: Regex-Grundlagen und Regex: Quantifizierer. 

( Subausdruck )

var string= "Teesst";
var search= "(\\w)\\1";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
ee
ss

<name>Subausdruck

var string= "Teesst";
var search= "(?<doppelt>\\w)\\k<doppelt>";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
ee
ss

positiv Lookahead

var string= "33 und 44X.";
var search= "[0-9]{1,}(?=X)";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
44

positiv Lookbehind 

var string= "X33 und 44";
var search= "(?<=X)[0-9]{1,}";
for (match of string.matchAll(search)) {
     console.log(`${match[0]}`);
}
console.log Ausgabe: 
33

negativ Lookahead

var string= "Nummer9 hat kein a vor der Nummer a8 schon";
var search= "(?<!a)[0-9]";
console.log(string.match(search)[0])
console.log Ausgabe: 
9

if-then-else 

Wird von JavaScript nicht unterstützt.

Ersetzen

Erklärungen und Details, siehe: Regex-Grundlagen und Regex: Ersetzungen.

var string = "eins zwei"; 
var search = /(\w+)\s(\w+)/; 
var replace = "$2 $1"
console.log(string.replace(search, replace ));
console.log Ausgabe: 
zwei eins

 

Details und Beschreibungen zu den hier angeführten Beispielen,
siehe: Regex - Überblick - Begriffe - Parameter - Theorie - Grundlagen.

 

positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE für deine Bewertung!
Beitrag erstellt von Bernhard | Veröffentlicht: 24.11.2021 |🔔 | Kommentare:0
➨ jQuery Beispiele | ➦ JavaScript | Regex, Überblick, Begriffe, Parameter, Grundlagen und Beispiele ➨

Fragen / Kommentare


Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu Mehr Details