✔ Quelltext anzeigen - die Zweite

[Ossi]

Manchmal kann alles so einfach sein:
habe endlich die Möglichkeit des Anzeigens von Quelltext einer Textarea gefunden.

Hier der Script:

<script language="javascript">
function display() {
alert(divEditable.innerHTML);
return;
}
</script>

(divEditable ist der Name der Textarea)

Nur wird der HTML-Code als Alert ausgegeben.
Kann mir jemand daraus 2 Varianten machen:
1. Variante: der Quellcode wird in einem neuen Fenster ausgegeben
2. Variante: der Quellcode wird in einem InlineFrame, daß sich auf der gleichen Seite wie die Textarea befindet, ausgegeben.

Please, help !!!!!

 

[THE REAL TOOLKIT]

variable=divEditable.innerHTML
fenster=open(...)
fenster.write(variable)

Beim iframe wärs nen bissl komplizierter.

 

[Adam Wille]

Nicht fenster.write(), sondern fenster.document.write().

Wegen dem iFrame musst du dir entweder das name-Attribut zunutze machen, dann kannst du über das Array document.frames was richten, das läuft aber nur in Browsern, die iFrames unterstützen - oder du holst dir das window-Objekt des iFrames über document.all (IE 4+, Opera mit geeigneter Konfig), bzw. document.getElement(s)By...(...) (IE 5.5+, Netscape 6+ && Mozilla, Opera wohl auch teilweise) ran und schreibst dort über die Methode document.write() was hinein.

hth,
Geist

 

[Ossi]

Mhhhmmm, irgendwie funktioniert es nicht, d.h. es wird schon ein Fenster aufgemacht, doch wird nicht der HTML-Code, sondern der formatierte Inhalt der Textarea angezeigt (auch nicht schlecht - kann ich als Preview-Funktion verwenden).

Ich möchte aber, daß in dem neuen Fenster der HTML-Code dargestellt wird.

Hier mein modifizierter Script (aber bitte nicht lachen !!!):

<script language="javascript">
function display() {
var setmode=divEditable.innerHTML;
var fenster=open('test.htm');
fenster.document.write(setmode);
}
</script>

... dazu der Schalter: onClick='display();'

Was ist hier falsch .......... (alles?)

 

[Adam Wille]

Problem hieran ist, dass du unmaskierten HTML-Code an einen Parser übergibst, welcher diesen einfach interpretiert und darstellt.

Also vorher alle < durch &lt; und > durch &gt; ersetzen, das dürfte im großen und ganzen schon reichen, da HTML ja tagbasiert ist.

Eine JavaScript-interne Methode für das Maskieren gibt es wohl nicht, aber die gängigen RegExp-Varianten sollten da gut mit klarkommen.

Gruß,
Geist

 

[Ossi]

Die Sache ist schon genial, einfach die Tag-Klammern durch zwei alternative Zeichen ersetzen, so daß der ganze Spaß komplett als Text interpretiert wird, nur, wie mache ich das. Kennst Du da eventuell einen Link ?

 

[Adam Wille]

Nein, ein konkretes Beispiel wüsste ich jetzt nicht verlinkt, aber die Sache ist nicht allzuschwer.

Vorhin beim Überlegen hab ich nach ner Methode gesucht, die automatisch die HTML-Sonderliterale maskiert, die gibt es nicht.
Dafür gibt es aber eine String-Methode namens replace(), die recht prima angegebenes ersetzen kann:

http://selfhtml.teamone.de/javascript/objekte/string.htm#replace

War mir vorhin nicht in den Sinn gekommen - den RegExp-Ausdruck, der als erster Parameter an die Methode kommt, müsstest du so gestalten:

/</

und beim zweiten Ersetzen:

/>/

Eigentlich also recht easy.

hth,
Geist

 

[Fabian H]

setmode = setmode.replace(/</,"&lt;");
setmode = setmode.replace(/>/,"&gt;");

Als Code.

[edit]Ich glaub, vor die Klammern muss noch je ein Backslash -> ausprobieren.

 

[Adam Wille]

Hm, afaik muss keins hin, aber mein JavaScript-Buch ist schon etwas betagt.

Geist

 

[Ossi]

Mhhhmmmm, ich habe folgendes bis jetzt
(funktioniert aber nur mit einer einzelnen Zeile, außerdem wird der Abschluß des Fontface-Tags vergessen):

<script language="javascript">
function displayHTML()
{
var quelltext=divEditable.innerHTML;
var tagopen = quelltext.replace(/</,"&lt;");
var tagclose = tagopen.replace(/>/,"&gt;");
var htmltext=open('test.htm');
htmltext.document.write(tagclose);
}
</script>