CSS, HTML & Javascript mit {stil}

Suchen und Ersetzen mit Regex: Backreference

Für Suchen und Ersetzen verwendet Javascript Backtracking oder Rückverweise. Runde Klammern im regulären Ausdruck (…) 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.

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

Ersetzen mit 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.

<p class="benz">
	Wenn der <em>Benz</em> bremst, brennt das <em>Benz</em>bremslicht.
</p>

Wenn der Benz bremst, brennt das Benzbremslicht.

Alle <em>/</em>-Tags durch <b>/<br> ersetzen.
const benz = document.querySelector(".benz").innerHTML;
const result = benz.replace(/<em>(.*?)<\/em>/gi, "<b>$1</b>");
document.querySelector(".repl").innerHTML = result;

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.

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+)/

In einem regulären Ausdruck lassen sich Teile des Musters in runde Klammern (…) setzen. Gruppen in runden Klammern (sogen. Capture-Gruppen) 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 …

Capture-Gruppen mit Namen

Alles, was mit den Ausdrücken in diesen runden Klammern matcht – passt – wird eingefangen (captured) und für später zugreifbar gemacht.

const str = "2025-09-21";
  erste Gruppe ┐       ┌ zweite Gruppe
               │       │        ┌ dritte Gruppe
               ▼       ▼        ▼
const re = /(\d{4})-(\d{2})-(\d{2})/;
const result = str.match(re);
console.log(result);
  • "2025", // [1] = erste Capture-Gruppe (\d{4})
  • "09", // [2] = zweite Gruppe (\d{2})
  • "21" // [3] = dritte Gruppe (\d{2})

Mit ES2018 wird das Arbeiten mit Gruppen / Backreferenz in regulären Ausdrücken deutlich intuitiver: Named Capture Groups - die Gruppen bekommen Namen in spitzen Klammern. Das ist deutlich besser lesbar als die eckigen Klammern.

const res = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = "2025-09-21".match(res);
console.log(result.groups.year);  // "2025"
console.log(result.groups.month); // "09"
console.log(result.groups.day);   // "21"

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.

Demo: Strickmuster

ISO-Datum als normales Datum anzeigen

Zuweisung mit rexeg.exec (str) ist besser lesbar (um einen Hauch, aber immerhin).<(p>)>

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.

Suchen auf mediaevent.de