Suchen und Ersetzen mit Regex: 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.

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

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).

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.

ISO-Datum als normales Datum anzeigen

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

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

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.