HTML-Code der aktuellen Auswahl

**AmicaNoctis** · 23.07.2009, 17:07

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

**squirrelcgn** · 23.07.2009, 17:15

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

Grüße,
Christian

**squirrelcgn** · 23.07.2009, 20:26

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!

**Kropff** · 23.07.2009, 21:03

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

**squirrelcgn** · 23.07.2009, 21:21

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!

**AmicaNoctis** · 23.07.2009, 21:59

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

**Kropff** · 23.07.2009, 22:12

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

**squirrelcgn** · 23.07.2009, 22:42

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!

**AmicaNoctis** · 23.07.2009, 22:51

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?

**squirrelcgn** · 23.07.2009, 23:05

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!!

**AmicaNoctis** · 23.07.2009, 23:10

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.

**squirrelcgn** · 24.07.2009, 02:01

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!

**AmicaNoctis** · 24.07.2009, 02:26

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

**squirrelcgn** · 25.07.2009, 00:21

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

HTML-Code der aktuellen Auswahl