<script>
function undoSearch() {
// Ueber alle Fundstellen:
document.querySelectorAll('span.found').forEach(item => {
// Elternelement ermitteln
const parent = item.parentNode;
// Textknoten mit Text des Elternelementes erzeugen
const newTxtNode = document.createTextNode(parent.textContent);
// ... und Elternelement damit ersetzen
parent.replaceWith(newTxtNode);
// Jetzt hat der Knoten wieder der ursprünglichen Zustand
});
}
function search(node, needle) {
const regex = new RegExp('(' + needle + ')', 'i');
node.childNodes.forEach(node => {
switch (node.nodeType) {
// Handelt es sich um einen Elementknoten?
case 1:
// Suche fortsetzen
search(node, needle);
break;
// Handelt es sich um einen Textknoten?
case 3:
// Den Text heraus ziehen
const txt = node.textContent.trim();
// console.log(txt)
if (txt != '') {
// Um den gefundenen Text hervor zu heben, betten wir ihn ein
// span-Element ein, das wir dann geeignet mit CSS gestalten koennen.
// In einem Textknoten wird jedoch kein HTML interpretiert.
// Daher erzeugen wir ein neues span-Element und tragen dort den
// geaenderten Text ein.
let newEle = document.createElement('span');
newEle.innerHTML = txt.replace(regex, '<span class="found">$1</span>')
node.replaceWith(newEle);
break;
}
}
});
}
let lastSearchStr = '',
foundElems,
idxSearch = 0;
// Die folgende Funktion wird durch das Suchformular aufgerufen
// und startet die Suche
function suchen(needle) {
// event.preventDefault();
// Unterscheidet sich der Suchstring vom gespeicherten?
// D. h. handelt es sich um eine neue Suche?
if (needle != lastSearchStr) {
lastSearchStr = needle;
idxSearch = 0;
// Aenderungen am DOM von der vorigen Suche rueckgaengig machen
undoSearch();
// Suche starten
search(document.querySelector('body'), needle);
// Gefundene Element bereit stellen
foundElems = document.querySelectorAll('.found');
// Erstes gefundenes Element hervor heben
foundElems[idxSearch].classList.add('highlight');
// ... und in den sichtbaren Bereich scrollen
foundElems[idxSearch].scrollIntoView();
searchDone = true;
} else {
// Hevorhebung des alten gefundenen Elementes löschen
foundElems[idxSearch].classList.remove('highlight');
// Sind weitere gefundene Element vorhanden?
if (foundElems[idxSearch + 1]) {
// Naechstes gefundenes Element hervor heben
idxSearch++;
foundElems[idxSearch].classList.add('highlight');
// ... und in den sichtbaren Bereich scrollen
foundElems[idxSearch].scrollIntoView();
} else {
// Keine weiteren gefundenen Elemente.
// Nachricht an Benutzer
let response = confirm('Keine weiteren Fundstellen vorhanden<br>' +
'zurück zum Suchfeld?');
console.log(response);
if (response) {
document.querySelector('input[name="suchtexting"]').scrollIntoView();
}
}
}
return false;
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('form[name="search"]').addEventListener('submit', function (event) {
event.preventDefault();
suchen(document.querySelector('input[name="suchtexting"]').value);
});
});
</script>
