JavaScript regex - Einführung und Beispiele

➦ JavaScript ➨ Regex, Überblick, Begriffe, Parameter, Grundlagen 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:

[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:

([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:

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:

* - 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:

{} - 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:

$ - 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:

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:

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:

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:

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.

^{({{pro_count}})}

Beitrag bewerten:
{{percentage}} % positiv

^{({{con_count}})}

DANKE für deine Bewertung!

Veröffentlichung: 24.11.2021 von Bernhard |🔔

➨ jQuery Beispiele | ➦ JavaScript | Regex, Überblick, Begriffe, Parameter, Grundlagen und Beispiele ➨

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: