[JavaScript] Div mit best. Klassennamen ansprechen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Hapablap, 13. Februar 2009 .

  1. 13. Februar 2009
    Div mit best. Klassennamen ansprechen

    Hi,

    Ich hab mir grad ein JS besorgt, um meine Suchergebnisse zu markieren.
    Das Problem ist, dass wenn man z.B. bla eingibt und es auch außerhalb der
    Suchergebnisse vorkommt, es auch markiert wird. Jetzt hab ich leider keine
    Ahnung von JS und hab gegoogelt, wie ich es machen könnte, aber leider nichts gefunden.

    Ich denke, es ist ziemlich einfach.

    Also hier ist das komplette JS:

    Code:
    function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) 
    {
     // the highlightStartTag and highlightEndTag parameters are optional
     if ((!highlightStartTag) || (!highlightEndTag)) {
     highlightStartTag = "<b>";
     highlightEndTag = "</b>";
     }
     
     // find all occurences of the search term in the given text,
     // and add some "highlight" tags to them (we're not using a
     // regular expression search, because we want to filter out
     // matches that occur within HTML tags and script blocks, so
     // we have to do a little extra validation)
     var newText = "";
     var i = -1;
     var lcSearchTerm = searchTerm.toLowerCase();
     var lcBodyText = bodyText.toLowerCase();
     
     while (bodyText.length > 0) {
     i = lcBodyText.indexOf(lcSearchTerm, i+1);
     if (i < 0) {
     newText += bodyText;
     bodyText = "";
     } else {
     // skip anything inside an HTML tag
     if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
     // skip anything inside a <script> block
     if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
     newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
     bodyText = bodyText.substr(i + searchTerm.length);
     lcBodyText = bodyText.toLowerCase();
     i = -1;
     }
     }
     }
     }
     
     return newText;
    }
    
    function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
    {
     // if the treatAsPhrase parameter is true, then we should search for 
     // the entire phrase that was entered; otherwise, we will split the
     // search string so that each word is searched for and highlighted
     // individually
     if (treatAsPhrase) {
     searchArray = [searchText];
     } else {
     searchArray = searchText.split(" ");
     }
     
     if (!document.body || typeof(document.body.innerHTML) == "undefined") {
     if (warnOnFailure) {
     alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
     }
     return false;
     }
     
     var bodyText = document.body.innerHTML;
     for (var i = 0; i < searchArray.length; i++) {
     bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);
     }
     
     document.body.innerHTML = bodyText;
     return true;
    }
    Und ich denke genau auf diese Zeile kommt es an:

    var bodyText = document.body.innerHTML;

    Wie sag ich denn jetzt, dass es nur in bestimmten Divs (mit bestimmter Klasse) passieren soll?

    Danke schon mal!
    Hapablap
     
  2. 13. Februar 2009
    AW: Div mit best. Klassennamen ansprechen

    Hey,

    wie du schon sagst, sehr simpel

    Code:
    <div id="bla">
    Text
    </div>
    
    var bodyText = [URL="http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id"]getElementById('bla')[/URL].innerHTML;
    
    Weitere Tipps findest du auch unter SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)


    Gruß Blackbird89
     
  3. 13. Februar 2009
    AW: Div mit best. Klassennamen ansprechen

    Klasse != ID

    Code:
    function getElementsByClassName(className) {
     var muster = new RegExp("(^| )" + className + "($| )");
     var alles = document.getElementsByTagName("*");
     var gefunden = new Array();
     var i;
    
     for (i=0; i < alles.length; i++) {
     if (alles[i] && alles[i].className && alles[i].className != "") {
     if (alles[i].className.match(muster))
     gefunden[gefunden.length] = alles[i];
     }
     }
    
     return gefunden;
    }
    
    hab ich via google gefunden. hf
     
  4. 13. Februar 2009
    AW: Div mit best. Klassennamen ansprechen

    Mh danke, aber das funktioniert leider nicht ^^
    Also mein Suchergebnis hat folgenden Aufbau:

    Für jedes Suchergebnis ein div:

    <div class="suchergebnis"><p> ... Inhalt </p></div>

    Aber leider hat das mit dem JS nicht funktioniert. Es funktioniert nur, wenn ichs auf die ganze Seite anwende.


    Edit: Mh danke Telefonzelle, aber irgendwie klappt das auch nicht. Wie gesagt ich hab keine Ahnung von JS und hab das jetzt so gemacht (funktioniert aber immer noch nicht):

    Code:
    function getElementsByClassName(className) {
     var muster = new RegExp("(^| )" + className + "($| )");
     var alles = document.getElementsByTagName("*");
     var gefunden = new Array();
     var i;
    
     for (i=0; i < alles.length; i++) {
     if (alles[i] && alles[i].className && alles[i].className != "") {
     if (alles[i].className.match(muster))
     gefunden[gefunden.length] = alles[i];
     }
     }
    
     return gefunden;
    }
    
    function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) 
    {
     // the highlightStartTag and highlightEndTag parameters are optional
     if ((!highlightStartTag) || (!highlightEndTag)) {
     highlightStartTag = "<b>";
     highlightEndTag = "</b>";
     }
     
     // find all occurences of the search term in the given text,
     // and add some "highlight" tags to them (we're not using a
     // regular expression search, because we want to filter out
     // matches that occur within HTML tags and script blocks, so
     // we have to do a little extra validation)
     var newText = "";
     var i = -1;
     var lcSearchTerm = searchTerm.toLowerCase();
     var lcBodyText = bodyText.toLowerCase();
     
     while (bodyText.length > 0) {
     i = lcBodyText.indexOf(lcSearchTerm, i+1);
     if (i < 0) {
     newText += bodyText;
     bodyText = "";
     } else {
     // skip anything inside an HTML tag
     if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
     // skip anything inside a <script> block
     if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
     newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
     bodyText = bodyText.substr(i + searchTerm.length);
     lcBodyText = bodyText.toLowerCase();
     i = -1;
     }
     }
     }
     }
     
     return newText;
    }
    
    function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
    {
     // if the treatAsPhrase parameter is true, then we should search for 
     // the entire phrase that was entered; otherwise, we will split the
     // search string so that each word is searched for and highlighted
     // individually
     if (treatAsPhrase) {
     searchArray = [searchText];
     } else {
     searchArray = searchText.split(" ");
     }
     
     if (!document.body || typeof(document.body.innerHTML) == "undefined") {
     if (warnOnFailure) {
     alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
     }
     return false;
     }
     
     //var bodyText = document.body.innerHTML;
     var bodyText = getElementByClass('suchergebnis');
     for (var i = 0; i < searchArray.length; i++) {
     bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);
     }
     
     document.body.innerHTML = bodyText;
     return true;
    }
     
  5. 13. Februar 2009
    AW: Div mit best. Klassennamen ansprechen

    Dann mach ein ExtraDiv um alle Suchergebnisse


    Hoffe das geht nun, wenn nicht steh ich irgendwie aufm Schlauch


    Gruß Blackbird89
     
  6. 13. Februar 2009
    AW: Div mit best. Klassennamen ansprechen

    Ne, geht leider auch nicht... aber ich bezweifle, dass du aufm Schlauch stehst, weil das sehr plausibel klingt ^^ Also vielleicht muss man noch mehr am JS anpassen...
    Vielleicht hat ja noch jemand ne Idee, wenn nicht, versuch ichs mal aufm andern Weg ...
     
  7. 13. Februar 2009
    AW: Div mit best. Klassennamen ansprechen

    was fällt dir auf? guck halt ma in die fehlerkonsole, die is nich ohne grund da.
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.