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!

Ver√∂ffentlichung: 24.11.2021 von Bernhard ūüĒĒ


Top-Artikel in diesem Bereich


Regex, √úberblick, Begriffe, Parameter, Grundlagen und Beispiele
Regex ist eine universelle Beschreibungssyntax um bestimmte Teile aus Zeichenketten zu pr√ľfen oder zu filtern. Als Beispiel k√∂nnten mit Regex sehr einfach alle <h1>-√úberschriften aus einem HTML-Quellcode herausgefiltert werden. Angefangen mit PHP, habe ich Regex sp√§ter auch in PowerShell und JavaScript eingesetzt. Zugegeben, anfangs habe ich Beispiele aus dem Internet f√ľr meine Einsatzzwecke angepasst und diese nur teilweise verstanden, zumal die Regex-Syntax doch...

ein JavaScript Beispiel
Mit Javascript HTML Elemente ansprechen und manipulieren, ein einfaches Beispiel.

JavaScript Text in die Zwischenablage
Mit folgender Funktion kann √ľber JavaScript ein Text in die Zwischenablage kopiert werden:

Fragen / Kommentare