plan_B: Wörter hervorheben

Beitrag lesen

SELF-Forum

Wörter hervorheben

plan_B
– Informationen zu den Bewertungsregeln

Hallo,

Siehe </archiv/2004/9/t88864/#m530093>

Man müsste den Textknoten in zwei aufsplitten und dazwischen das span-Element einfügen. Das ist keinesfalls so trivial.

Dabei ist das eigentlich ein hübscher Anwendungsfall für die Methode splitText.

diese Methode habe ich gerade mal nicht gefunden, dafür das obige Beispiel "verbessert" oder auch nicht. Jedenfalls eine schöne Übung.

  
<html>  
<head>  
<title></title>  
<style type="text/css">  
.highlight {color:red}  
</style>  
  
<script type="text/javascript">  
  
function ersetzen (element, suchwort) {  
  
var suchwort_low=suchwort.toLowerCase();  
for (var node = element.firstChild,nextnode; node; node=nextnode) {  
  
 nextnode=node.nextSibling; // vor Wandlung festhalten  
  
 if (node.nodeType == 1) {  
   // alert('rekursion');  
   ersetzen(node, suchwort);  
  }  
  
 var pos;  
  while (node.nodeType == 3 &&  
   (pos=node.nodeValue.toLowerCase().indexOf(suchwort_low)) >-1 ) {  
  // alert("wechseln \n"+ node.nodeValue)  
    var string_before = node.nodeValue.substring(0, pos);  
    var string_after = node.nodeValue.substr(pos + suchwort.length);  
    var textnode_before = document.createTextNode(string_before)  
    var suchwort_node = document.createElement('span');  
    suchwort_node.className='highlight';  
    var suchwort_textnode = document.createTextNode(suchwort);  
    suchwort_node.appendChild(suchwort_textnode);  
    var textnode_after = document.createTextNode(string_after);  
    node.parentNode.replaceChild(textnode_after, node);  
    textnode_after.parentNode.insertBefore(textnode_before, textnode_after);  
    textnode_after.parentNode.insertBefore(suchwort_node, textnode_after);  
   node=textnode_after;  
   }  
 }  
}  
  
function init() {  
 var sw=prompt("Nach welchem Wort soll gesucht werden?",'entchen');  
 if (sw) ersetzen(document.getElementsByTagName("body")[0],sw );  
}  
  
</script>  
</head>  
<body onload="init()">  
  
<p>alle meine entchen schwimmen auf dem entchensee. <h2>alle meine entchen</h2><p> ... schwimmen auf dem <a href="www.entchensee.de" title="rund um den Entchensee">mehr vom Entchensee</a>. Alle meine<b> Entchen schwimmen auf dem entchensee</b>.alle meine entchen schwimmen auf dem entchensee.  
</p>  
  
</body>  
</html>
--
Gruß plan_B     *®*´¯`·.¸¸.·
Beitrag melden
–
Informationen zu den Bewertungsregeln