basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Hi, ich habe ein kleines Script welches mir in einer HTML Seite den Suchbegriff markiert. Allerdings habe ich das Problem, dass es auch die HTML Befehle sucht und markiert. Dadurch gerät die Anzeige durcheinander. Was müsste ich denn ändern, dass die HTML Kommandos nicht mit durchsucht werden? <span style="font-weight:900"><span style="color:#f82a2a">Code ausgeblendet</span></span> Wenn ich jetzt nach KARL suche, ist alles gut Suche ich nach UL dann wird das HTML <UL> angezeigt, was eigentlich nicht sein sollte. Es zerstört die Anzeige.

    Code

                                        
                                     <html>
    <head>
      <style>
        .mark {
     background-color: #f00;
     font-weight:  bold;
     color:   #fff;
    }
      </style>
       </head>
    <body>
    <input type="text" id="inpu" onKeyUp="f_mark(this.value)" />
    <div id="content_search" >
    <ul>
     <li class="test">Karl Klapp</li>
     <li id="juhu">Hans Schranz</li>
     <li>Karl Napf</li>
     <li>Peter Meier</li>
     <li>Hans Mayer</li>
     <li>Guido Petersen</li>
     <li>Ingo Hansen</li>
     <li>Eduard Karlsson</li>
    </ul>
    </div>
    <script> 
    /*
      document.getElementById("txt").innerHTML
    document.getElementById("textContenttxt").textContent
      document.getElementById("txt").textContent
      */
       var start=document.getElementById('content_search');
     var text=start.innerHTML;
    function hole(){  
      start.innerHTML=text;
    }
    hole();
    
    function f_mark(p_value){
       var ff=hole();
       let aktuell=start.innerHTML;
        if (window.find && window.getSelection) {
            document.designMode = "on";
            var sel = window.getSelection();
            sel.collapse(start, 0);
            while (window.find(p_value)) {
                document.execCommand("HiliteColor", false, "yellow");
                sel.collapseToEnd();
            }
            document.designMode = "off";
         document.getElementById('inpu').focus();
        } 
       start.focus();
    }
    </script>
      <div id="info"></div>
    </body>
    </html>