HTML-Code der aktuellen Auswahl

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • HTML-Code der aktuellen Auswahl

    Hallo zusammen,

    bin schon seit Tagen auf der Suche nach einem geeigneten Ansatzpunkt für ein (wahrscheinlich kleines) Problem - mittlerweile bin ich mir sicher, dass JavaScript die beste/einzige Sprache sein dürfte, mit der das Problem überhaupt lösbar ist.

    PROBLEM
    Man markiert (mit der Maus) auf einer im Browser angezeigten Webseite ein kleines Stück Text. Nun möchte ich erreichen, dass der gesamte "übergeordnete HTML-Tag" (inklusive parameter und content) extrahiert/gespeichert wird. Im folgenden ein einfaches Beispiel.

    BEISPIEL

    (1.) Text/Textteil auswählen


    (2.) Button klicken oder evtl. via EventHandler Punkt (3.) anstoßen.


    (3.) Es wird der "übergeordnete HTML-Tag" ermittelt (und gespeichert)



    Es wäre super, wenn mir jemand hier (vielleicht sogar aus eigener Erfahrung) einen Tipp geben könnte, wie ich hier einsteigen/herangehen sollte.

    Vielen Dank im Voraus und Grüße,
    Christian

  • #2
    Ranges

    Hallo Christian,

    das macht man mit sogenannten Ranges

    im IE: TextRange Object

    im Firefox: https://developer.mozilla.org/en/DOM/Selection

    das W3C sagt: Document Object Model Range

    Gruß,

    Anja
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      Vielen Dank, Anja! Dein Tipp ist Gold wert! Da werde ich mich jetzt mal intensiv reinlesen.

      Grüße,
      Christian

      Kommentar


      • #4
        Hallo zusammen,
        hallo Anja,

        bin jetzt schon recht weit gekommen, aber hänge an einer Stelle fest. Vielleicht könnt ihr mich kurz schubsen... ;-) Der folgende HTML-Code funktioniert in FF und Opera.

        Code:
        <html>
        
        <head>
        
        	<script type="text/javascript">
        			
        		function showSelection() {
        			// (*)
        			var selObj = window.getSelection(); 
        			alert(selObj);
        			//var selRange = selObj.getRangeAt(0);
        			
        			// (**)
        			var anchorNode = selObj.anchorNode;
        			var parentNode = anchorNode.parentNode;
        			alert(parentNode);
        		}
        		
        	</script>
        
        </head>
        
        <body>
        	
        	<p>Hier steht Text. Und noch mehr Text. Und noch viel mehr Text...</p>
        	
        	<input type="button" value="Start" onclick="showSelection()">
        	
        </body>
        
        </html>
        Ich würde ja gerne erreichen, dass beim zweiten alert (im Teil (**) im Code) nicht "object HTMLParagraphElement" ausgegeben wird, sondern eben der GESAMTE ParagraphElement ansich, also "<p>Hier steht Text. Und noch mehr Text. Und noch viel mehr Text...</p>". Leider klappt es auch bei Anwendung von "toString()" nicht.

        Die von Anja genannte Site https://developer.mozilla.org/en/DOM/Selection ist sehr gut, aber ich finde dort leider nicht die von mir gesuchte property/method.

        Bin für jeden Tipp sehr dankbar!

        Viele Grüße!

        Kommentar


        • #5
          Erstens. Benenne Variablen nie wie JavaScript-Eigenschaften/-Methoden! Ganz böse! Also lieber so:
          PHP-Code:
          var anch selObj.anchorNode;
          var 
          par  anch.parentNode;
          alert(par); 
          Und nun zu deiner Frage. Da gibt es zwei Möglichkeiten. Erstens
          PHP-Code:
          // Ungetestet
          alert (par.innerHTML); 
          oder du gehst komplett über das DOM und schnipselst dir alles zusammen. Also mit firstChild und nodeValue/data. Eine Übersicht dazu findest du bei mir

          Peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            Wow!! Danke, Peter! Deine Website ist ja der Hammer, eine wahre Fundgrube!

            Sehe ich es richtig, dass ich nicht drum herum komme, die Tags "beim Namen zu nennen"? Muss ich zwingend die Namen der Tags angeben, also z.B. getElementByTagName("p").firstChild.nodeValue? Kann ich das getElementByXY() vermeiden?

            Zusammenfassend kann ich das Problem jetzt umformulieren:
            Wie kann ich den gesamten umgebenen Tag (mit Tag-Zeichen (<, >), properties und content) einer Range ausgeben?

            Danke und Grüße!
            Zuletzt geändert von squirrelcgn; 23.07.2009, 22:39.

            Kommentar


            • #7
              Wenn ein Element ein ID-Attribut hat, kannst du es auch mit
              Code:
              document.getElementById("deineID")
              ansprechen.

              Elemente in der Nähe eines auf die Art geholten erreichst du über

              Code:
              deinElement.parentNode
              deinElement.previousSibling
                deinElement.nextSibling
                   deinElement.firstChild
                       deinElement.lastChild
                            deinElement.childNodes[deinIndex]
              Theoretisch kannst du damit von document ausgehend auch alle Knoten erreichen, das kann aber schnell unübersichtlich werden
              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
              Super, danke!
              [/COLOR]

              Kommentar


              • #8
                Zitat von squirrelcgn Beitrag anzeigen
                Sehe ich es richtig, dass ich nicht drum herum komme, die Tags "beim Namen zu nennen"? Muss ich zwingend die Namen der Tags angeben, also z.B. getElementByTagName("p").firstChild.nodeValue? Kann ich das getElementByXY() vermeiden?
                Wie du es machst, ist deine Entscheidung. JavaScript läßt dir da leider/gottseidank viele Freiheiten. Mein Tipp. Verpass den wirklich wichtigen Elementen eine ID und arbeite mit document.getElementById.

                Peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  Danke Euch Peter und AmicaNoctis!

                  Ich MUSS es aber leider komplett ohne ID-Neuvergabe lösen! Das ist leider unumgänglich... :-( Ich muss quasi davon ausgehen, dass ich die Struktur des gesamten Dokumentes nicht kenne. Meine Idee ist ja: von der markierten Stelle "eine Ebene nach oben gehen" und schon hat man den gesamten "übergerodneten HTML-Tag". Aber ich glaube das ist gar nicht so einfach... (oder ich drücke mich die ganze Zeit unscharf aus).

                  Im Prinzip würde es doch auch reichen, wenn ich es hinbekommen würde die POSITION im HTML-Code (als Integer) zu ermitteln, an der die Range beginnt!

                  Habt ihr dazu vielleicht eine Idee?

                  Danke und Grüße!

                  Kommentar


                  • #10
                    So etwas wie eine implizite Integer-ID für alle Knoten gibt es nicht, es sei denn du baust selber eine traverse-Funktion, aber das widerspricht noch mehr der Grundlage, dass du das Dokument "nicht kennst".

                    "Eine Ebene nach oben gehen" ist ganz einfach:

                    Code:
                    aktuellerKnoten.parentNode
                    Damit bekommst du den Elternknoten. Wenn du das schon weißt, muss ich wirklich zugeben, dass du dich unscharf ausgedrückt hast

                    Das innerHTML hast du schon probiert, ja?
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      Okay, danke AmicaNoctis! Sowohl parentNode als auch innerHTML hatte ich bereits ausprobiert, leider ohne Erfolg.

                      Ich frage mal ganz direkt und herausfordernd: wie würdest du/würdet ihr denn das im Anfangspost geschilderte Problem lösen? Vielleicht gibt es ja jemanden, der das in 2 Minuten hinbekommt und sich etwas dazuverdienen möchte? ;-)

                      Danke und Grüße!!

                      Kommentar


                      • #12
                        Dafür wären mindestens noch zwei Sachen interessant:

                        1. Warum speicherst du den HTML-Code des übergeordneten Elements? Vielleicht hast du ja damit was vor, was sich besser lösen lässt, wenn du das Elementobjekt speicherst?

                        2. Was soll passieren, wenn man über Elementgrenzen hinweg selektiert hat? Theoretisch kann die Selektion einen Teilbaum enthalten und nicht nur einen Knoten oder Teil davon.
                        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                        Super, danke!
                        [/COLOR]

                        Kommentar


                        • #13
                          Hallo zusammen,
                          hallo AmicaNoctis,

                          habe gerade versucht, Antworten auf AmicaNoctis' Fragen zu formulieren, da ist mir eingefallen, dass das Problem vllt. von einer ganz anderen Seite angegangen werden sollte...

                          Was ich "nachbauen" möchte ist im Prinzip EXAKT das gleiche, was passiert, wenn man in Firefox das Addon "Firebug" installiert und dort im Modus "Untersuchen" ("Inspector") mit der Maus über die aktive Website "fliegt": es werden (inder oberen Screenhälfte) alle Tags gehighlightet, die man mit der Maus berührt und (in der unteren Screenhälfte) die kompletten zugehörigen Tags angezeigt. (Firebug: https://addons.mozilla.org/de/firefox/addon/1843)

                          Im Prinzip möchte ich diese Funktion "nur" so erweitern, dass man, wenn man einen Tag/Text mit Firebug-Inspector gehighlightet hat, durch simples Klicken den Inhalt des Code-Inspectors (untere Hälte des Firebug-Screens) irgendwie abspeichern kann.

                          Kannst du / könnt ihr das nachvollziehen? Ich hoffe das ist nicht allzu verwirrend! ;-)

                          Da Firebug open source ist, habe ich mir mal den code des "Firebug Inspectors" (inspector.js) angeschaut: http://code.google.com/p/fbug/source...g/inspector.js Allerdings ist das für mich derart komplex und unübersichtlich, dass ich den "missing link" für mein Puzzle leider dort nicht identifizieren kann.

                          Kann mir jemand dabei helfen?

                          Danke und Grüße!
                          Zuletzt geändert von squirrelcgn; 24.07.2009, 02:09.

                          Kommentar


                          • #14
                            also brauchst du den Umweg über die Selection/Ranges eigentlich gar nicht, wenn dir das Hovern schon reicht und du z. B. mit STRG+C das gewählte Element in die Zwischenablage bekommst?

                            Als Beispiel (so was ähnliches mit hovering, aber ohne Zwischenablage) hätte ich ein Bookmarklet für dich, was ich mal geschrieben hab, um Layer-Ads wegzumachen ("Schließen" bedeutet bei denen manchmal das Gegenteil) und um Seiten in eine Druckversion zu überführen (Bilder und Navigation entfernen).

                            Das Teil funktioniert so: du aktivierst das Bookmarklet (aka Favelet) und hoverst über die Seite. Das Element unter der Maus wird jeweils hervorgehoben. Wenn du es löschen willst, drückst du ENTF und hoverst weiter oder beendest das ganze mit ESC.

                            Hier der "Link" (ohne '):
                            'javascript:void((function(){var%20s=document.body.appendChild(document.createElement("script"));s.t ype="text/javascript";s.src="http://sedna-soft.de/js/favelet/remove-elements.js";})());'

                            ACHTUNG: irgendwie macht die Forensoftware bei "s.type" immer ein Leerzeichen rein, das muss natürlich weg! Ich bekomme es einfach nicht weg, obwohl es ja nie da war.

                            Hier der Quelltext: http://sedna-soft.de/js/favelet/remove-elements.js

                            Du musst dann nur noch document.onkeydown an deine Bedürfnisse anpassen. Wenn du dann wieder nicht weiterkommst, kannste dich ja immer nochmal melden...

                            Nur so nebenbei: statt Geld würde ich mich über eine positive Bewertung freuen
                            Zuletzt geändert von AmicaNoctis; 24.07.2009, 02:30.
                            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                            Super, danke!
                            [/COLOR]

                            Kommentar


                            • #15
                              Hi Anja,

                              vielen, vielen Dank! Dein Skript ist genau was ich gesucht habe!!!

                              Jetzt habe ich stundenlang herumprobiert, und befürchte, dass ich jetzt vor dem GLEICHEN Problem stehe wie vorher ("mein" Lösungsansatz)... (ich möchte ja erreichen, dass der gesamte HTML-Code, welcher gerade gehovert ist, ausgegeben/gespeichert wird).

                              Habe den "document.onkeydown"-Handler so erweitert:

                              Code:
                              else if (pEvent.keyCode == 32 && currentNode && currentNode.nodeType == 1) {
                              			alert(currentNode.text);
                              		}
                              (also wenn man "SPACE (32)" drückt, soll der gesamte HTML-Code des currentNode ausgegeben werden)

                              ...und auch currentNode.toString() funktioniert nicht. :-(


                              Bin ich schon wieder auf dem Holzweg, oder kannst du mir einen Tritt verpassen? ;-)

                              Danke und Grüße,
                              Christian
                              Zuletzt geändert von squirrelcgn; 25.07.2009, 00:24.

                              Kommentar

                              Lädt...
                              X