Javascript – Array Filtern und Hervorheben mit Regex

Downloads:

Beispiel Arrays definieren

Hier wird von einem Array mit Objekten ausgegangen.
Zusätzlich wird ein temsTemp 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 items gefüllt.
Die originale Liste 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 Property title mittels Regex ersetzt.
Innerhalb der .replace Funktion wird eine anonyme Funktion genutzt, die den erstetzen Teilabschnitt zurückgibt.
Somit lässt sich der originale Teilabschnitt durch ein „span“ mit einer Klasse, z.B.: „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>`);
  }
}