Sempervivum
Erfahrenes Mitglied
... Versuche dieses Javascript:
und dieses CSS:
anstelle des mit :target.
Die Hervorhebung des Linkziels wird dann mit Klick irgend wo aufgehoben.
Code:
<script>
function undoSearch(cls) {
// Ueber alle Fundstellen:
document.querySelectorAll('span.' + cls).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, cls) {
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, cls);
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="' + cls + '">$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('found');
// Suche starten
search(document.querySelector('body'), needle, 'found');
// 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);
});
document.querySelectorAll('a').forEach(item => {
item.addEventListener('click', function (event) {
const needle = item.innerHTML.replace(/\s+/, ' ');
const destId = item.href.substr(item.href.indexOf('#') + 1);
console.log(destId)
const dest = document.getElementById(destId);
search(dest, needle, 'link-dest');
dest.querySelector('.link-dest').classList.add('link-dest-2');
});
});
document.addEventListener('click', event => {
if (event.target.tagName != 'A') {
undoSearch('link-dest');
}
});
});
</script>
Code:
.link-dest-2 {
background-color: lightblue;
}Die Hervorhebung des Linkziels wird dann mit Klick irgend wo aufgehoben.
