Javascript Regex Backreference

Reguläre Ausdrücke: Rückverweise oder Backreference

Für Suchen und Ersetzen verwendet Javascript Backtracking oder Rückverweise. Runde Klammern im Regex bilden Gruppen und sind der Speicher oder das Gedächtnis für bereits gefundene Teilstrings: Das ist der Rückverweise oder Backreferenz des regulären Ausdrucks.

18-12-15 SITEMAP

Backtracking

Bei der Auswertung eines regulären Ausdrucks liest der Interpreter die Zeichenkette Zeichen für Zeichen ein und vergleicht jedes Zeichen mit der entsprechenden Stelle des regulären Ausdrucks. Dabei merkt sich der Interpreter die Stellen, an denen es mehr als eine Möglichkeit gibt und wenn der Interpreter beim Testen einer Variante feststellt, dass der Gesamtausdruck nicht mehr zutrifft, kehr er an diese Stelle zurück und prüft die Alternative.

Dieses „Backtracking“ erlaubt numerierte Rückbezüge auf geklammerte Ausdrücke. Alle Ausdrücke in runden Klammern bilden Gruppen, die von links nach rechts durchnummeriert werden.

(Meier)|(H(ä|ae)(ß|ss)ler)
0 -> Meier
1 -> Häßler
2 -> äß
3 -> äss
4 -> aeß
5 -> aess

Regex-Gruppen

Beide reguläre Ausdrücke finden dieselbe Folge von Ziffern, aber der zweite Ausdruck kann später durch eine besondere Variable für ein Backreference (Rückverweis) aus dem Gedächtnis geholt und mit $Num angesprochen werden:

/\d+/
/(\d+)/

Gruppen in runden Klammern werden z.B. für ein "oder" eingesetzt: Suche ä oder ae: /(ä|ae)/.

Außerhalb des regulären Ausdrucks – z.B. im Ersetzungsteil – wird die besondere Variable durch $1 für die erste runde Klammer, $2 für die zweite, … bis $99 verwendet.

Diese Namenskonvention für Variablen – $ – hat Javascript aus Perl genommen (PHP-Programmierer kennen diese Schreibweise für Variablennamen ebenfalls). Hat also an dieser Stelle nichts mit jQuery zu tun …

Strings tauschen

Mit Backreferences oder Rückverweisen kann ein regulärer Ausdruck Strings tauschen (swap).

Sie pflanzten Rosen und diverse Bäume.

let br = document.querySelector(".br").innerHTML;
let result = br.replace(/(Rosen)(.*)(Bäume)/,"$3 $2 $1");
document.querySelector(".br").innerHTML = result;
     $1    $2    $3
     |     |     |
(/(Rosen)(.*)(Bäume)/,"$3 $2 $1")

Die Gruppe (.*) – $2 – steht für "alles Mögliche dazwischen".

URL zu Link

Alle URLs in klickbare Links umwandeln

Reguläre Ausdrücke bei https://www.mediaevent.de/html/input-pattern.html und auf https://www.mediaevent.de/javascript/string-search.html

<p class="text">Reguläre Ausdrücke bei https://www.mediaevent.de/html/input-pattern.html und auf https://www.mediaevent.de/javascript/string-search.html</p>

let text = document.querySelector(".text").innerHTML;

text = text.replace(/(https?:\/\/[^ ]+)/g, (match, link) => {
  // einen evt. Slash am Ende ersetzen
  link = link.replace(/\/?$/, '');
  
  return `<a href="${link}" target="_blank">${link.substr(link.lastIndexOf('/') +1)}</a>`;
});

document.querySelector(".result").innerHTML = text;

Backreference mit ()

Die Notation $Num ist so intuitiv wie ein Lochstrickmuster. Zuweisung mit rexeg.exec (str) ist besser lesbar (um einen Hauch, aber immerhin).

ISO-Datum als normales Datum anzeigen

ISO-Datum in normaler Schreibweise
function parseIsoDate(str) {
    let matchObj = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec(str);

    if (!matchObj) {
        throw new Error('Kein valides ISO-Datum: ' + str );
    }
    
    return matchObj[3] + "." + matchObj[2] + "." + matchObj[1];
}

Named capturing groups sollen in Zukunft die Lesbarkeit der Fragmente verbessern. Gibt es aktuell als babelio.js-Plugin von DmitrySoshnikov.

Alle Treffer einer Suche markieren

string match und string replace funktionieren mit regulären Ausdrücken, aber string text nur mit einer Zeichenkette.

Die Zeichenkette string soll immer in ein mark-Tag eingeschlossen werden. Typische Anwendung: Wenn der Suchbegriff in der Liste der Treffer markiert werden soll.

let str = document.querySelector("#replace").innerHTML.replace(/(string)/ig,"<mark> $1 </mark>");
document.querySelector("#result").innerHTML = str; 

Gefunden auf Stackoverflow

Würde auch mit $& anstelle von $1 funktionieren, da hier nur auf eine Gruppe verwiesen wird.

31292725232119171513119753116151413121110987654321 Square in a Diamond Lace Knitting Stitch