#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 + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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; } + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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 ... + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren