✔ Highlighten funktioniert nicht

[rernanded]

Hi,
habe untenstehendes js in meine home.php eingebunden um die Seite durchsuchbar zu machen. Funktioniert nicht ganz weil die gefundenen Textstellen nur kursiv angezeigt werden. Was muß ich tun um zu highlighten wie es auch vorgesehen ist. Bin kein js-Kenner. Ich denke mal ich muß eine class/mehrere classes in den .css anlegen.

Moni

var ref = "";

function highlightWord(node,word) {
	
	if (node.hasChildNodes) {
		var hi_cn;
		for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
			highlightWord(node.childNodes[hi_cn],word);
		}
	}

	if (node.nodeType == 3) { 
		tempNodeVal = node.nodeValue.toLowerCase();
		tempWordVal = word.toLowerCase();
		if (tempNodeVal.indexOf(tempWordVal) != -1) {
			pn = node.parentNode;
			klasse = "searchword"+w; 	// different colors for differnt searchterms

			if (pn.className != klasse) {
				// word has not already been highlighted!
				nv = node.nodeValue;
				ni = tempNodeVal.indexOf(tempWordVal);

				// create a load of replacement nodes
				before = document.createTextNode(nv.substr(0,ni));
				docWordVal = nv.substr(ni,word.length);
				after = document.createTextNode(nv.substr(ni+word.length));
				hiwordtext = document.createTextNode(docWordVal);
				hiword = document.createElement("em");
      				hiword.className = klasse;
				hiword.appendChild(hiwordtext);
				pn.insertBefore(before,node);
				pn.insertBefore(hiword,node);
				pn.insertBefore(after,node);
				pn.removeChild(node);
			}
		}
	}
}

function Highlight()
	{
      	if (window.location.search.indexOf("nohighlight") !== -1) return;
	if (!document.createElement) return;

	// if your site search file is not called home.*, you must modify the following line 2x! 
	if (document.referrer.search(/home.+/) != -1 && document.URL.indexOf("home") == -1 ) {
	ref = unescape(document.referrer);
	if (window.location.search) ref = unescape(window.location.search);
	}

	if (window.location.search) { ref = unescape(window.location.search); }

	qs = ref.substr(ref.indexOf('?')+1);

	qs = qs.replace(/\.|,|;|!|\?|:|"|'|\//gi,'');

	qsa = qs.split('&');

	for (i=0;i<qsa.length;i++) {
		qsip = qsa[i].split('=');
	        		if (qsip.length == 1 || qsip.length == 5) continue;
        	
	{ 
			if (qsip[1].length < 1 ) continue;

			// remove all blanks and '+' before and after searchterm
			qsip[1] = qsip[1].replace(/^(\s+|\++)/,'').replace(/(\++)$/,'').replace(/(\s+)$/,'');

			if (qsip[1] != '') {
			words = unescape(qsip[1].replace(/\+/g,' ')).split(/\s+/);
				for (w=0;w<words.length;w++) {
					if (words[w].length >= 1) {

	   highlightWord(document.getElementsByTagName("body")[0],words[w]);

}
}
}
}
}
}

window.onload = Highlight;

<form id="search" method="get" action="home.php">
<p>
<label for="suchbegriff"></label>
<input name="q" type="text" id="suchbegriff" size="50" />
&nbsp;&nbsp;&nbsp;
<input type="submit" value="suchen" />
</p>
</form>

 

[ComFreek]

Zwei Möglichkeiten:

1.) Du fügst folgendes ein:

// create a load of replacement nodes
before = document.createTextNode(nv.substr(0,ni));
docWordVal = nv.substr(ni,word.length);
after = document.createTextNode(nv.substr(ni+word.length));
hiwordtext = document.createTextNode(docWordVal);
hiword = document.createElement("em");
hiword.className = klasse;
// gelb hervorheben
hiword.style.backgroundColor = "yellow";
hiword.appendChild(hiwordtext);
pn.insertBefore(before,node);
pn.insertBefore(hiword,node);
pn.insertBefore(after,node);
pn.removeChild(node);

oder

2.) Du erstellst in deinem CSS-Code eine Klasse namens "searchword":

.searchword
{
  backgroundColor: yellow;
}

Dazu würde ich noch dieses +w hier entfernen:

// Vorher
klasse = "searchword"+w;    // different colors for differnt searchterms

// Nachher
klasse = "searchword";

Ich habe jetzt nicht auf die Schnelle gesehen, woher die Variable w kommt.
Das kommt wohl aus einer globalen Variable der Funktion Highlight(). Dies ist eigtl. ganz schlechter Code-Stil. Und da du ja wahrscheinlich eh nicht für jeden Suchterm eine eigene Klasse anlegen möchtest, kannst du meine Lösung verwenden.

 

[rernanded]

@ComFreek
Danke danke danke, klappt bestens. Du bist ein Schatz.

Moni