Mario: Grafik durch Text ersetzen

Hallo Forum.

Ich nutze unter Firefox die Erweiterung greasemonkey und habe nun ein Javascript gefunden, welches Grafiken durch simplen Text ersetzt. Dazu wird createTextNode verwendet. Nun möchte ich aber, statt simplen Text, HTML Code ausgeben. Habe nachgelesen, das dies mit innerHTML oder auch nodeValue möglich wäre, nur leider fehlt mir der Ansatz, um die vorhandene Lösung umzuschreiben. Der Code sieht wie folgt aus:

var links = document.getElementsByTagName('img');
var i = 0;
var text1;
while(i<links.length) {
 if((links[i].src.match(/.*new.gif/gi))) {
  text1 = document.createTextNode('new');
  links[i].parentNode.appendChild(text1);
  links[i].parentNode.removeChild(links[i]);
 }
 if((links[i].src.match(/.*old.gif/gi))) {
  text1 = document.createTextNode('old');
  links[i].parentNode.appendChild(text1);
  links[i].parentNode.removeChild(links[i]);
 }
 i++;
}

Wäre nett, wenn mir jmd. einen Ansatz oder ein Beispiel zeigen könnte, so das ich daraus eine Lösung für mein Problem ableiten kann.

Gruß,
Mario

  1. Hallo Mario.

    Nun möchte ich aber, statt simplen Text, HTML Code ausgeben.

    Und was genau?

    Habe nachgelesen, das dies mit innerHTML oder auch nodeValue möglich wäre,

    Nein, das genügt noch nicht. Um HTML-Elemente in den Dokumentenbaum einhängen zu können, musst du sie erst einmal erstellen und ggf. mit Attributen oder eben Inhalt füllen.

    Wäre nett, wenn mir jmd. einen Ansatz oder ein Beispiel zeigen könnte, so das ich daraus eine Lösung für mein Problem ableiten kann.

    Ich denke, dass dies noch recht gut machbar ist.
    Du greifst über parentNode auf das Elternelement des Bildes zu und ersetzt das <img>-Element durch das, was du dort eben haben möchtest.
    Also im Prinzip dasselbe, was das Skript momentan auch schon macht, nur eben dass du keinen Text einhängst und das <img>-Element entfernst, sondern das <img> durch etwas anderes ersetzt.

    Einen schönen Mittwoch noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
    Meine Browser: Opera 8.01 | Firefox 1.0.5 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
    1. Hallo Ashura.

      Und was genau?

      Ein <div>-Elemet mit einem class-Attribut und Textinhalt.

      Nein, das genügt noch nicht. Um HTML-Elemente in den Dokumentenbaum einhängen zu können, musst du sie erst einmal erstellen und ggf. mit Attributen oder eben Inhalt füllen.

      Ich denke, dass dies noch recht gut machbar ist.
      Du greifst über parentNode auf das Elternelement des Bildes zu und ersetzt das <img>-Element durch das, was du dort eben haben möchtest.
      Also im Prinzip dasselbe, was das Skript momentan auch schon macht, nur eben dass du keinen Text einhängst und das <img>-Element entfernst, sondern das <img> durch etwas anderes ersetzt.

      Dann probier ich es einfach mal:

      var meinDiv = document.createElement("div");
      var meinDivText = document.createTextNode("Testdiv");

      meinText.setAttribute("class","test");
      meinText.appendChild(meinDivText);

      var links = document.getElementsByTagName('img');

      links.parentNode.replaceChild(meinDiv, links);

      Gruß,
      Mario

      1. Hallo Mario.

        Ein <div>-Elemet mit einem class-Attribut und Textinhalt.

        »»

        Dann probier ich es einfach mal:

        var meinDiv = document.createElement("div");
        var meinDivText = document.createTextNode("Testdiv");

        Bis hierher ist es in Ordnung.

        meinText.setAttribute("class","test");
        meinText.appendChild(meinDivText);

        Nanu? Wolltest du nicht so etwas erstellen?

        <div class="test">Testdiv</div>

        Wo kommt die Variable meinText auf einmal her?

        var links = document.getElementsByTagName('img');

        links.parentNode.replaceChild(meinDiv, links);

        Das geht nicht. Du kannst nicht einen Array (ein Objekt) aus mehreren Elementen durch ein einziges ersetzen.

        Du hast doch mit deiner Funktion schon eine gute Ausgangslage, warum nutzt du diese nicht?

        Du musst mit der bereits vorhandenen Schleife (nebenbei bietet sich hier for statt while an) alle <img>-Elemente abklappern und deinen Kriterien entsprechend ersetzen:

        var links = document.getElementsByTagName('img');
        /* Hier das <div> intialisieren */

        for (var i = 0; i < links.length; i++;) {

        if (links[i].src.match(/.*new.gif/gi)) {
          /* text1 = document.createTextNode('new');
          links[i].parentNode.appendChild(text1);
          links[i].parentNode.removeChild(links[i]);

        obiges durch die replaceChild-Funktion
          und die createTextNode-Funktion ersetzen */
          }
          if (links[i].src.match(/.*old.gif/gi)) {
          /*text1 = document.createTextNode('old');
          links[i].parentNode.appendChild(text1);
          links[i].parentNode.removeChild(links[i]);

        Dito. */
          }
        }

        Einen schönen Mittwoch noch.

        Gruß, Ashura

        --
        Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
        30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
        Meine Browser: Opera 8.01 | Firefox 1.0.5 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
        [Deshalb frei! - Argumente pro freie Software]
        1. Hallo.

          var links = document.getElementsByTagName('img');  
          /* Hier das <div> intialisieren */  
            
          for (var i = 0; i < links.length; i++;) {  
            
            if (links[i].src.match(/.*new\.gif/gi)) {  
            /* text1 = document.createTextNode('new');  
            links[i].parentNode.appendChild(text1);  
            links[i].parentNode.removeChild(links[i]);  
            
            obiges durch die replaceChild-Funktion  
            und die createTextNode-Funktion ersetzen */  
            }  
            if (links[i].src.match(/.*old\.gif/gi)) {  
            /*text1 = document.createTextNode('old');  
            links[i].parentNode.appendChild(text1);  
            links[i].parentNode.removeChild(links[i]);  
            
            Dito. */  
            }  
          }
          

          Einen schönen Mittwoch noch.

          Gruß, Ashura

          --
          Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
          30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
          Meine Browser: Opera 8.01 | Firefox 1.0.5 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
          [Deshalb frei! - Argumente pro freie Software]
        2. Hallo Ashura.

          Nanu? Wolltest du nicht so etwas erstellen?

          <div class="test">Testdiv</div>

          Wo kommt die Variable meinText auf einmal her?

          Aus irgendeinem Grund hab ich einfach die Variable falsch bezeichnet.

          Du musst mit der bereits vorhandenen Schleife (nebenbei bietet sich hier for statt while an) alle <img>-Elemente abklappern und deinen Kriterien entsprechend ersetzen:

          var links = document.getElementsByTagName('img');
          /* Hier das <div> intialisieren */

          for (var i = 0; i < links.length; i++;) {

          if (links[i].src.match(/.*new.gif/gi)) {
            /* text1 = document.createTextNode('new');
            links[i].parentNode.appendChild(text1);
            links[i].parentNode.removeChild(links[i]);

          obiges durch die replaceChild-Funktion
            und die createTextNode-Funktion ersetzen */
            }
            if (links[i].src.match(/.*old.gif/gi)) {
            /*text1 = document.createTextNode('old');
            links[i].parentNode.appendChild(text1);
            links[i].parentNode.removeChild(links[i]);

          Dito. */
            }
          }

          Da ich erstmal pauschal bei beiden if-Bedingungen das gleiche <div>-Element verwenden möchte, hab ich createTextNode in den if's erstmal nicht benutzt. Was ich bisher nun habe:

          var links = document.getElementsByTagName('img');

          var meinDiv = document.createElement('div');
          var meinDivText = document.createTextNode('Testdiv');

          meinDiv.setAttribute('class','test');
          meinDiv.appendChild(meinDivText);

          for (var i = 0; i < links.length; i++)
          {
           if((links[i].src.match(/.*forum_old.gif/gi)))
           {
            links[i].parentNode.replaceChild(meinDiv,links[i]);
           }

          if((links[i].src.match(/.*forum_new.gif/gi)))
           {
            links[i].parentNode.replaceChild(meinDiv, links[i]);
           }
          }

          Ergebnis: Alle Grafiken verschwinden und werden _nicht_ durch das <div> ersetzt. Einmal hatte es, scheinbar willkürlich, funktioniert. Da hatte ich nach der zweiten if Anweisung ausversehen noch das i++ von der vorhergehenden while Schleife stehen gelassen.

          Habe auch versucht statt links[i] in replaceChild links[i].parentNode.firstChild zu verwenden, was aber auch nicht geklappt hat.

          Einen schönen Mittwoch noch.

          Ebenso und Danke bisher für die Mühe!

          Gruß,
          Mario

          1. Hallo Mario.

            Ergebnis: Alle Grafiken verschwinden und werden _nicht_ durch das <div> ersetzt.

            Hast du dir zwischenzeitlich einmal links[i].parentNode.tagName ausgeben lassen? (Mit alert())

            Habe auch versucht statt links[i] in replaceChild links[i].parentNode.firstChild zu verwenden, was aber auch nicht geklappt hat.

            Das würde auch nichts nützen, da du damit lediglich das erste Kindelement des Elternelementes entfernen würdest, ungeachtet dessen, was dies nun eigentlich ist.

            Etwas merkwürdig finde ich dies aber schon. (Oder ich übersehe einen Fehler.)

            Kann man sich das ganze einmal online betrachten?

            Einen schönen Mittwoch noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
            Meine Browser: Opera 8.01 | Firefox 1.0.5 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
            [Deshalb frei! - Argumente pro freie Software]
            1. Hallo Ashura.

              Hast du dir zwischenzeitlich einmal links[i].parentNode.tagName ausgeben lassen? (Mit alert())

              Habe es vor und nach replaceChild eingefügt:

              alert("1 " + links[i].parentNode.tagName);
              links[i].parentNode.replaceChild(meinDiv,links[i]);
              alert("2 " + meinDiv.parentNode.tagName);

              Folgendes ist nun zu beobachten:

              Alert: 1 TD -> (Bild 1 ist noch da)
              Alert: 2 TD -> (Bild 1 weg, Testdiv 1 steht da)
              Alert: 1 TD -> (Testdiv 1 steht immer noch da, Bild 2 ist noch da)
              Alert: 2 TD -> (Testdiv 1 weg, Bild 2 weg, Testdiv 2 steht da)

              Das Skript ersetzt also wie gewünscht, nur "verschwindet" das <div>-Element aus irgendeinem Grund dann wieder komplett.

              Kann man sich das ganze einmal online betrachten?

              Geht leider nur lokal, da das Javascript über die Erweiterung von Firefox, nämlich greasemonkey läuft. Ich wende das Skript auf ein vBulletin Forum an.

              Hab zwischendurch ein Bookmarklet gefunden, welches alle Grafiken einer Seite durch ihr alt-Attribut ersetzt. Das funktioniert fehlerfrei:

              function toArray (c)
              {
               var a, k;
               a=new Array;
               for (k=0; k<c.length; ++k)
               a[k]=c[k];
               return a;
              }
              var images, img, altText;
              images=toArray(document.images);
              for (var i=0; i<images.length; ++i)
              {
              img=images[i];
              altText=document.createTextNode(img.alt);
              img.parentNode.replaceChild(altText, img)
              }

              Leider sehe ich nicht, was das Skript so großartig anderes macht als das, an dem wir hier rumbasteln.

              Gruß,
              Mario

            2. Hallo Ashura.

              Nun funktioniert es. Die korrekte Funktion lautet:

              while (i<links.length)
              {
               meinDiv = document.createElement('div');

              if((links[i].src.match(/.*forum_old.gif/gi)))
               {
                meinDiv.setAttribute('class','falt');
                meinDivText = document.createTextNode(' ');
                meinDiv.appendChild(meinDivText);
                links[i].parentNode.replaceChild(meinDiv,links[i]);
               }
               if((links[i].src.match(/.*forum_new.gif/gi)))
               {
                meinDiv.setAttribute('class','fneu');
                meinDivText = document.createTextNode(' ');
                meinDiv.appendChild(meinDivText);
                links[i].parentNode.replaceChild(meinDiv,links[i]);
               }
              }

              Der Unterschied zu vorher ist allein der, dass das <div>-Element innerhalb der Schleife erstellt und mit Werten gefüllt wird. Danke nochmals für die ausführliche Hilfeleistung!

              Gruß,
              Mario

              1. Hallo Mario.

                Der Unterschied zu vorher ist allein der, dass das <div>-Element innerhalb der Schleife erstellt und mit Werten gefüllt wird. Danke nochmals für die ausführliche Hilfeleistung!

                Stimmt, natürlich. Warum bin ich darauf nicht gekommen.
                (Ich arbeite normalerweise mit cloneNode.)

                Einen schönen Donnerstag noch.

                Gruß, Ashura

                --
                Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
                30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
                Meine Browser: Opera 8.01 | Firefox 1.0.5 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                [Deshalb frei! - Argumente pro freie Software]