• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

innerHTML und pre Tag

wer

New member
Hallo,

ich versuche gerade mittels Javascript in pre-Tags Zeilen wie

#include <stdio.h>

in

#include <stdio.h>

zu wandeln.

Wenn ich mir mit

lines=precode.innerHTML.split(/\r|\n/);

die einzelnen Zeilen hole, dann findet sich zusätzlich ein schließender Tag

</stdio.h>

Läßt sich das irgendwie vermeiden?
 
Zuletzt bearbeitet von einem Moderator:
Was meinst du denn genau damit?

Ich gehe davon aus, daß <stdio.h> als tag interpretiert wird, dem das schließende Tag </stdio.h> fehlt. Offensichtlich wird das dann einfach ergänzt, damit alles seine Ordnung hat. Dieses schließende Tag hat natürlich nichts in meiner <pre> Umgebung zu suchen.

Am liebsten wäre mir, ich käme an den Inhalt der <pre>-Umgebungen, ohne daß das schon irgendwie geparst ist.
 
Zuletzt bearbeitet von einem Moderator:
Mach doch mal einen Testlink wo man sich das genauer anschauen kann oder poste Code mit dem das nachvollziehbar ist.
 
@wer: Was haben denn die Zeilenumbrüche im split mit der Fragestellung zu tun?
Im übrigen bitte bei Zitaten darauf achten, dass diese auch geschlossen werden und Code bitte in entsprechende Tags setzen.
 
@wer: Was haben denn die Zeilenumbrüche im split mit der Fragestellung zu tun?
Im übrigen bitte bei Zitaten darauf achten, dass diese auch geschlossen werden und Code bitte in entsprechende Tags setzen.
Welches Zitat ist nicht geschlossen?

Zum Split: Meine <pre>-Umgebung enthält mehrere Zeilen C-Code. Den lasse ich mir mit split zeilenweise zerlegen. Als Ergebnis finde ich dann aber hinter einer Zeile mit

#include <stdio.h>

noch eine neue Zeile

</stdio.h>

die in meiner <pre>-Umgebung nicht enthalten war, die also von dem internen Parser hinzugefügt wurde.

Diese zusätzliche Zeile, das schließende Tag ist mein Problem.
 
Welches Zitat ist nicht geschlossen?
Das Zitat aus Beitrag #3 war nicht geschlossen, daher auch der Hinweis am unteren Bereich der Meldung: Geändert von mikdoe (Heute um 06:57 Uhr) Grund: Zitat repariert, INLINE Tags


... das schließende Tag ist mein Problem.

Mach doch mal einen Testlink wo man sich das genauer anschauen kann oder poste Code mit dem das nachvollziehbar ist.

Und noch eine Frage: Wo kommt denn der C-Code her, den du in deinem pre-Tag hast?
 
Zuletzt bearbeitet:
Warum weigerst du dich so vehement einen Testlink bzw. lauffähiges Codebeispiel zu liefern?
Ich finde das unverständlich und nicht hilfreich für die Leute, die hier freiwillig ihre Hilfe anbieten.

Auch hast du dir den geparsten Quellcode deines händisch befüllten pre-Tags nicht angeschaut, denn dann würdest du erkennen, das dort schon dein schließendes <stdio.h>-Tag schon beim parsen des Quellcodes vom Browser hinzugefügt worden ist. Und somit ist auch klar, das .innerHTML korrekt arbeitet.

Um das alles mal zu verdeutlichen, habe ich mal deine Aufgabe übernommen und ein lauffähiges Beispiel erstellt:
HTML:
<!DOCTYPE html>
<html lang="de">

<head>
    <!-- UTF-8 Prüfkommentar -->
    <title>C code to HTML</title>
    <!-- META -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="author" content="Gobianweb.de" />
    <meta name="generator" content="Notepad++" />
    <meta name="keywords" content="background, background-size, contain, cover, background-repeat, no-repeat" />
    <!-- Stylesheet -->
    <style>
    h1 {
        font-size: 1.2em;
    }

    span.description {
        background-color: #ffffff;
        font-size: 1.2em;
        font-weight: bold;
    }
    span#current {
        color: #ff0000;
        font-size: 1.1em;
        font-weight: bold;
    }

    pre, code {
        color: #000000;
        font-size: 1em;
        text-align: left;
        height: 200px;
        display: block;
        margin: 10px 0 0 0;
        border: 2px solid darkgray;
    }

    textarea {
        color: #000000;
        font-size: 1em;
        text-align: left;
        width: 99%;
        height: 200px;
        display: block;
        margin: 10px 0 0 0;
        border: 2px solid darkgray;
    }

    .wrapper_1 {
        width: 48%;
        height: 245px;
        display: block;
        margin: 4px;
        padding: 4px;
        float: left;
    }

    #html_result {
        color: #000;
        text-align: left;
        text-shadow: 1px 1px 0 #ffffff;
        height: 200px;
        border: 2px solid darkgray;
    }
    </style>
    <!-- JavaScript -->
    <script>
    'use strict';

    function parsePreToHtmlPre() {
        var i,
            outputHtml,
            lines;

        outputHtml = '';
        lines = document.getElementById('source_plain_pre').innerHTML.split(/\r|\n/);

        for (i = 0; i < lines.length; i += 1) {
            outputHtml += lines[i].replace(/</g, '<').replace(/>/g, '>').replace(/ /g, ' ').replace(/\t/g, '    ');
            outputHtml += '<br />';
        }

        document.getElementById('result_html_pre').innerHTML = outputHtml;
        document.getElementById('result_html_code').innerHTML = outputHtml;
    }

    function parsePreToHtmlTextarea() {
        var i,
            outputHtml,
            lines;

        outputHtml = '';
        lines = document.getElementById('source_plain_textarea').value.split(/\r|\n/);

        for (i = 0; i < lines.length; i += 1) {
            outputHtml += lines[i].replace(/</g, '<').replace(/>/g, '>').replace(/ /g, ' ').replace(/\t/g, '    ');
            outputHtml += '<br />';
        }

        document.getElementById('result_html_pre').innerHTML = outputHtml;
        document.getElementById('result_html_code').innerHTML = outputHtml;
    }
    </script>
</head>

<body>
    <h1>C code in <pre> tags or <code> tags</h1>
    <span id="current">Click button to start...</span>
    <button onclick="parsePreToHtmlPre();">parse pre to HTML</button>
    <button onclick="parsePreToHtmlTextarea();">parse textarea to HTML</button>
    <br />
    <br />
    <div class="wrapper_1">
        <span class="description">C code input (pre tag)</span>
        <pre id="source_plain_pre">
/* Hello World program */

#include <stdio.h>

main()
{
    printf("Hello World");
}</pre>
    </div>
    <div class="wrapper_1">
        <span class="description">C code input (textarea)</span>
        <textarea id="source_plain_textarea">
/* Hello World program */

#include <stdio.h>

main()
{
    printf("Hello World");
}
        </textarea>
    </div>
    <div class="wrapper_1">
        <span class="description">C code output (pre)</span>
        <pre id="result_html_pre"></pre>
    </div>
    <div class="wrapper_1">
        <span class="description">C code output (textarea)</span>
        <code id="result_html_code"></code>
    </div>
</body>

</html>

Schaue dir das mal in einem Browser an und auch den geparsten Quellcode, bevor du einen der Buttons anklickst.
 
Zum Split: Meine <pre>-Umgebung enthält mehrere Zeilen C-Code.
Und ist dieser Aufbau immer und zwingend oder kann es auch mal sein, dass die Sachen in einer Zeile ohne \n oder \r stehen, wie das z.B. bei HTML der Fall sein könnte? Das war, worauf ich mit dem Zeilentrenner hinaus wollte.
 
Warum weigerst du dich so vehement einen Testlink bzw. lauffähiges Codebeispiel zu liefern?
Habe ich gesagt, ich würde mich weigern? Ich befinde mich zur Zeit einfach nicht zu Hause, sondern auf der Arbeit. Da kann ich nicht an mein Beispiel ran. Du mußt den Menschen nicht unbedingt Schlechtigkeiten unterstellen.

- - - Aktualisiert - - -

Auch hast du dir den geparsten Quellcode deines händisch befüllten pre-Tags nicht angeschaut, denn dann würdest du erkennen, das dort schon dein schließendes <stdio.h>-Tag schon beim parsen des Quellcodes vom Browser hinzugefügt worden ist. Und somit ist auch klar, das .innerHTML korrekt arbeitet.
Ich habe nie behauptet, daß innerHTML nicht korrekt arbeiten würde. Sondern ich bemerkte, daß mir der zusätzlich eingefügte Schließen-Tag Probleme macht und ich eine Lösung für meine eigentliche Aufgabe suche, die '<' bzw '>' Zeichen zu entschärfen.
Um das alles mal zu verdeutlichen, habe ich mal deine Aufgabe übernommen und ein lauffähiges Beispiel erstellt:
Ja, und wie sieht jetzt eine Lösung aus?

- - - Aktualisiert - - -

Und ist dieser Aufbau immer und zwingend oder kann es auch mal sein, dass die Sachen in einer Zeile ohne \n oder \r stehen, wie das z.B. bei HTML der Fall sein könnte? Das war, worauf ich mit dem Zeilentrenner hinaus wollte.
Du meinst, ob immer direkt danach ein Zeilenende kommt?
Nein. Das '<' oder '>' Zeichen kann zum Beispiel auch in Vergleichen vorkommen:
Code:
int a=4;

if (a<10) puts("ok");
 
Du meinst, ob immer direkt danach ein Zeilenende kommt?
Fast. Ich meinte damit, ob eine neue "Zeile" wirklich immer mit \n\r zu erkennen ist?
Ich kann z.B. in HTML entweder
Code:
<html><head>...
oder
Code:
<html>
    <head>
        ...
schreiben. Beides ist valide aber du bekommst es mit deinem split(/\r|\n/); nicht gegriffen

Nein. Das '<' oder '>' Zeichen kann zum Beispiel auch in Vergleichen vorkommen
Davon gehe ich aus aber bisher hast du nur das eine split gezeigt oder verstehe ich jetzt hier irgendwas nicht?
 
bisher hast du nur das eine split gezeigt oder verstehe ich jetzt hier irgendwas nicht?
Gehe mal davon aus, daß ich das nicht richtig verstehe. Schließlich bin ich der Anfänger!

Vielleicht habe ich die Sache ja vollkommen falsch angepackt.

Ich möchte C-Code in einer <pre>-Umgebung darstellen. Ich dachte, dazu muß ich alle in HTML speziefischen Zeichen, wie '<', '>' vielleicht auch '&' entschärfen. Wie ist die generische Vorgehensweise in so einem Fall? Das kommt ja sicher nicht so selten vor?
 
Ich dachte, dazu muß ich alle in HTML speziefischen Zeichen, wie '<', '>' vielleicht auch '&' entschärfen.
Wenn du den Quelltext direkt ins HTML schreibst, musst du alle Sonderzeichen (v.A. die drei erwähnten) über HTML-Entities maskieren - und das bevor der Browser das zu Gesicht bekommt... also in deinem M4 Macro (k.A. ob es da schon entsprechende Funktionen für gibt).

Mit JS kommt man nur über Umwege an den Originalen Quellcode, den der Server rausschickt. Da ist es immer einfacher das auf der Serverseite zu machen.
 
Ja - bei .innerHTML. Denn genau dafür gibt es stattdessen .textContent.
Aber damit gibt es wieder Kompatibilitätsprobleme, oder?

- - - Aktualisiert - - -

Wenn du den Quelltext direkt ins HTML schreibst, musst du alle Sonderzeichen (v.A. die drei erwähnten) über HTML-Entities maskieren - und das bevor der Browser das zu Gesicht bekommt... also in deinem M4 Macro (k.A. ob es da schon entsprechende Funktionen für gibt).
Mit JS kommt man nur über Umwege an den Originalen Quellcode, den der Server rausschickt. Da ist es immer einfacher das auf der Serverseite zu machen.
Könntest Du etwas zu diesen Umwegen sagen?
 
Habe ich gesagt, ich würde mich weigern?
Niemand! Das war nur eine Frage von mir.


Ich befinde mich zur Zeit einfach nicht zu Hause, sondern auf der Arbeit. Da kann ich nicht an mein Beispiel ran.
Wusste ja nicht das du über Nacht nicht zu Hause warst ;)


Du mußt den Menschen nicht unbedingt Schlechtigkeiten unterstellen.
Wenn das so rüber kam dann Entschuldigung. Es wäre aber durchaus nett gewesen, wenn du zumeindest etwas dazu gesagt hättest, wie z.B.: Ich befinde mich zur Zeit einfach nicht zu Hause, sondern auf der Arbeit. Da kann ich nicht an mein Beispiel ran. Aber wenn ich wieder zu Hause bin kann ich ja mal ein lauffähiges Beispiel machen... (Oder so ähnlich)


Ich habe nie behauptet, daß innerHTML nicht korrekt arbeiten würde. Sondern ich bemerkte, daß mir der zusätzlich eingefügte Schließen-Tag Probleme macht und ich eine Lösung für meine eigentliche Aufgabe suche, die '<' bzw '>' Zeichen zu entschärfen.
Dann habe ich dich in diesem Punkt falsch verstanden.


Ja, und wie sieht jetzt eine Lösung aus?
Wenn du das Beispiel aus Beitrag #9 ausprobierst, wirst du sehen das der Umweg über ein <textarea>-Element das Problem lösen kann.
Ein weiterer Weg wäre, den C-Code in eine JavaScript-Variable zu schreiben und aus dieser heraus dann den Textinhalt ändern und in das <pre>-Element zu schreiben.
Oder aber wie kkapsner vorgeschlagen hat, den C-Code durch dein M4 Macro entsprechend entschärft in dein <pre>-Element zu schreiben.

Da z.B. ich aber nicht weiß was du mit diesem M4 Macro genau meinst bzw. wie dein genauer Ablauf ist (du erwähntest nur die händische Methode) kann ich dir da nicht unbedingt weiter helfen.


Denn genau dafür gibt es stattdessen .textContent.
Stimmt, aber nur Im Fall von schreiben in ein <pre>-Element. Dann kannst du eine Zeichenkette wie var outputText = '/* Hello World program */\n\n#include <stdio.h>\n\nmain()\n{\n\tprintf("Hello World");\n}\n'; direkt dort reinschreiben weil nichts geparst wird.
Wenn jedoch, wie in der Erklärung von wer das M4 Macro das direkt in des <pre>-Element schreibt, dann nützt dir .textContent auch nichts, da beim Auslesen des <pre>-Elements dann das nicht geschlossene <stdio.h>-Element ignoriert wird und als Zeichenkette dann folgendes herauskommt: '/* Hello World program */\n\n#include\n\nmain()\n{\n\tprintf("Hello World");\n}\n'
 
Ich dachte gerade, ich hätte eine ganz simple Methode gefunden:

Code:
<iframe src="main.txt" width="50%" >
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die Datei über den folgenden Link
aufrufen: <a href="main.txt">Zur Datei</a></p></iframe>

Dummerweise funktioniert das nicht mehr mit:

Code:
<iframe src="main.c" width="50%" >
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die Datei über den folgenden Link
aufrufen: <a href="main.c">Zur Datei</a></p></iframe>

Es ist zum verzwazzeln!
 
Da z.B. ich aber nicht weiß was du mit diesem M4 Macro genau meinst bzw. wie dein genauer Ablauf ist (du erwähntest nur die händische Methode) kann ich dir da nicht unbedingt weiter helfen.
Bevor du dich total verzwazzelst erkläre doch mal im Detail was dieses M4 Macro ist und wie du konkret mit dem Einfügen vorgehst (woher kommt der C-Code, in welcher Umgebung läuft das ganze, welche Browser werden zum endgültigen Anzeigen benutzt etc...).

Oder liest dieses M4 Macro einfach nur bestehende Codedateien wie z.B. main.c in deinem letzten Beitrag?
 
Stimmt, aber nur Im Fall von schreiben in ein <pre>-Element. Dann kannst du eine Zeichenkette wie var outputText = '/* Hello World program */\n\n#include <stdio.h>\n\nmain()\n{\n\tprintf("Hello World");\n}\n'; direkt dort reinschreiben weil nichts geparst wird.
Ja, hatte die Frage nicht genau genug gelesen...
 
Zurück
Oben