Frida: Wörter hervorheben

SELF-Forum

Wörter hervorheben

Frida
– Informationen zu den Bewertungsregeln

Hi,

wie kann ich es erreichen, dass z.B. jedes Wort "test" im Body-Text mit einem <span class="clExtraWort"> und </span> umschlossen wird?
Dies soll per Javascript passieren, nachdem das Dokument ausgelesen wurde.

Würde mich über hilfreiche Tipps freuen.
Danke schonmal.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wörter hervorheben

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Frida,

    document.body.innerHTML.replace("test","<span class='clExtraWort'>test</span>")

    mit document.body.innerHTML erhältst Du alles zwischen <body> und </body>. Mit replace kannst Du in diesem String Teile durch andere ersetzen.

    innerHTML gehört zwar nicht zum DOM-Standard, wird aber von (fast?) allen Browsern unterstützt.

    replace funktioniert auch mit Strings, es müssen nicht unbedingt reguläre Ausdrücke sein.

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wörter hervorheben

      _plan_b
      – Informationen zu den Bewertungsregeln

      hallo,

      document.body.innerHTML.replace("test","<span class='clExtraWort'>test</span>")

      würde fast funktionieren, wenn du auf solche Links wie "http://.../test/.../test1.htm" keine Rücksicht nehmen wolltest.  
  
wahrscheinlich muss man alle Textknoten des Baumes einzeln überprüfen  
  
Gruß plan\_B
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wörter hervorheben

        JürgenB_
        – Informationen zu den Bewertungsregeln

        Hallo,

        wahrscheinlich muss man alle Textknoten des Baumes einzeln überprüfen

        Das Problem ist mir nach dem Absenden auch aufgefallen. Also schnell einen RegExp basteln, der nur außerhalb von < und > sucht.

        Das Problem mit Durchsuchen der Textknoten zu lösen, dürfte auch nicht einfacher werden, da man jetzt nicht mehr so einfach mit innerHTML hantieren kann und auf createElement zurückgreifen muss.

        Gruß,    Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Wörter hervorheben

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

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

    Mathias

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wörter hervorheben

      wahsaga Homepage des Autors
      – Informationen zu den Bewertungsregeln

      hi,

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

      Der Eintrag ist zwar schon was älter, aber trotzdem eine Anmerkung:

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

      Dort aber, wenn ich das richtig sehe, etwas umständlich gelöst.
      Um aus einem Textkonten zwei zu machen, werden zwei neue erzeugt und eingefügt, und das Original entfernt.
      Dabei ist das eigentlich ein hübscher Anwendungsfall für die Methode splitText.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 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

        1. Wörter hervorheben

          wahsaga Homepage des Autors
          – Informationen zu den Bewertungsregeln

          hi,

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

          diese Methode habe ich gerade mal nicht gefunden

          Ist in SELFHTML auch m.W. nicht dokumentiert.

          http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1312295772

          Mir ist noch kein DOM 2-fähiger Browser über den Weg gelaufen, der damit Probleme hatte.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wörter hervorheben

            plan_B
            – Informationen zu den Bewertungsregeln

            Hallo,

            http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1312295772

            Danke für den Link, mit splitText werde ich noch rumprobieren und die übriggebliebenen Bugs bekämpfen:

            • Gross/Kleinschreibung
            • leere Textknoten
            • ...

            ein bischen möchte Frida sicherlich auch noch tun ...

            --
            Gruß plan_B     *®*´¯`·.¸¸.·
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln