Javascript – Array Filtern und Hervorheben mit Regex

Tutorial JavaScript

von Ardian Shala, 28.10.2017 - update: 07.11.2017
Filtern und Hervorheben von Einträgen eines Arrays mit Hilfe von Javascript Regex.
Vorraussetzung:

Downloads:

JsFiddle

Beispiel Arrays definieren

Hier wird von einem Array mit Objekten ausgegangen.
Zusätzlich wird ein „itemsTemp“ erstellt, welches bei dem Filtern durch die „items“ Einträge gefüllt wird.

let items = [{ title: "first" }, { title: "second" }, { title: "third"} ];
let itemsTemp = [];

Filter Funktion definieren

Das Filtern eines Array wird hier mittels Javascript Regex mit Pattern bewältigt.
„g“ steht für „global“, sodass alle Stellen im String gefunden werden.
„i“ steht für „ignore“, sodass unabhängig von Groß- oder Kleinschreibung Stellen im String gefunden werden.
„filteredItems“ wird nun mittels Regex aus den „items“ gefüllt.
Die originale Liste „items“ wird somit nicht abgeändert.
Anschließend wird „filteredItems“ mittels „.map“ iteriert und als neue Objekte zurückgegeben um ein Kopieren „by reference“ zu verhindern.

function filter(searchText) {
  let regex = new RegExp(searchText, 'gi');
  let filteredItems = items.filter(item => item.title.match(regex);
  return filteredItems.map((item) => {
    return {
      title: item.title
    }
  });
}

Hervorheben Funktion definieren

Das Hervorheben von Teil-Strings wird hier mit dem gleichen Regex bewältigt.
Hierfür werden die „itemsTemp“ Einträge iteriert und die „title“ Property mittels Regex ersetzt.
Innerhalb der „.replace“ Funktion wird eine anonyme Funktion genutzt, die den erstetzen Teilabscnitt zurückgibt.
Somit lässt sich der originale Teilabschnitt durch ein „span“ mit der Klasse „highlight“ und dem Text ersetzen.
Die Klasse „.highlight“ kann dann z.B.: mit einem auffälligen Background gesetzt werden.

function highlight(searchText) {
  let regex  = new RegExp(searchText, 'gi');
  for (let item of itemsTemp) {
    item.title = item.title.replace(regex, (str) => `<span class="highlight">${str}</span>`);
  }
}

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Frontend Entwickler mit Angular, Ionic und Backend Entwickler mit C#.