Javascript String match () – Zeichenkette durchsuchen

JS match – Suche nach einfachen Zeichenfolgen

Mit einem regulären Ausdruck kann match() z.B. nach verschiedenen Schreibweisen und Varianten des Suchmusters suchen. Wenn ein einfaches Suchmuster (z.B. zug) gefunden wird, gibt JS match den ersten Treffer zurück, und null sonst.

// Suche mit einfachem String
let result = text.match("Zug");

// Suche mit regulärem Ausdruck und Modifiern
let result = text.match(/zug/ig);

Wenn alle Vorkommen von »zug« oder »Zug« unabhängig von Groß- und Kleinschreibung gefunden werden sollen, muss match() mit einem regulären Ausdruck aufgerufen werden. Reguläre Ausdrücke suchen mit mehr oder minder komplizierten Suchmustern.

Im einfachsten Fall sitzt der Teilstring innerhalb eines öffnenden und schließenden Schrägstrichs. Die Modifier i (case insensitiv) und g (global) erweitern die einfache Suche: mit i ignoriert match() Klein- und Großschreibung, mit g durchsucht match() den kompletten String.

Reguläre Ausdrücke in JavaScript

match() mit regulärem Ausdruck

Interessant wird die Suche mit match(), wenn verschiedene Ausdrücke bzw. Schreibweisen und Varianten gefiltert werden sollen. Ganz simpel: Finde Häßler in allen Schreibweisen.

let mynam = document.querySelector("#mynam").innerHTML;

                        ss oder ß  ────┐
                                       │
          ae oder ä oder e ────┐       │
                               ▼       ▼ 
let treffer = mynam.match(/H(ae|ä|e)(ss|ß)ler/ig);
                                              ▲▲
                         i für ignore case ───┘│
          g für global im gesamten String   ───┘

let allmatches = document.querySelector("#allmatches");
allmatches.innerHTML = treffer;

Und auch einfach: Findet Ziffern im Text.

const ziffern = document.querySelector("#ziffern").innerHTML;
const alleziffern = ziffern.match (/\d+/g);

function listArray (elem, index) {
	document.querySelector("#ziffern").innerHTML += `index[${index}] ${elem.trim()}<br>`;
}

alleziffern.forEach (listArray);

Am Rande: Strings in Backticks ` mit $-Zeichen – das ist ein Template-Literal. ${} wird ausgeführt und dann als String eingesetzt.

Capture-Gruppen

In einem regulären Ausdruck lassen sich Teile des Musters in runde Klammern (…) setzen. 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 es richtig interessant: 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"

Suche nach HTML-Tags in einem Text

<div>
  <a href="/javascript/Javascript-Strings.html">Strings</a> sind <em>Zeichenketten</em> aus Wörtern,
  Zeichen oder Ziffern, die durch einfache oder doppelte <strong>Hochkommas</strong> vom 
  <code>Programmcode</code> abgegrenzt sind.
</div>

["<div>", "<a href=\"/javascript/Javascript-Strings.html\">", "</a>", "<em>", "</em>", "<strong>", "</strong>", "<code>", "</code>", "</div>"] (10)

let matchTag = /<(?:.|\s)*?>/g;
let result = text.match (matchTag);
console.log (result);