Formatcode, der in div angezeigt wird

Ich baue eine JavaScript-basierte Benutzeroberfläche, die Code basierend auf der Benutzeroberfläche generiert. Ich habe die Code-Generierung funktioniert. Der Code wird in einer Zeichenfolge gespeichert. Ich habe versucht, es zu formatieren, es einrücken, aber ich weiß nicht mehr wie. Gibt es eine Möglichkeit, den Code formatiert zu löschen?Formatcode, der in div angezeigt wird

Zum Beispiel, wenn ich diese Zeichenfolge haben:

"<body><div><h1>Hi</h1></div></body>"

ausgegeben wird wie folgt aus:

<body> 
    <div> 
    <h1> 
     Hi 
    </h1> 
    </div> 
</body>

jetzt wie folgt ich outputing:

$(".output").text(string);

Quelle

2017-02-17 Niqql

Werfen Sie einen Blick am Code-Tag in HTML. Zeigen Sie Ihre Zeichenfolge von Code-Tags umschlossen

Oder Textbereich verwenden. https://jsfiddle.net/sureshatta/k1atgn6o/1/

Wenn Sie versuchen, die formatierte Ausgabe achived haben bitte einen Blick auf Vorlage Literale

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Quelle

2017-02-17 09:48:07

ist das Code-Tag nicht nur für das Monospacing und nicht für Linesplitting oder Indenting? – Niqql

@Niqql Ja. Wahr. Meine zweite Lösung funktioniert? –

Dies würde funktionieren, um es anzuzeigen, aber der Code wird in der Zeichenfolge eingerückt gespeichert. Die Anzeige ist nicht das Problem, die Einrückung ist. – Niqql

.text() für den Wandel benutzen Sie den Text jeder Tag.

.html() ist verwenden für die Zeichenfolge mit dem Tag hinzufügen.

$(".output").html(string);

Quelle

2017-02-17 09:50:10

Dies wird alle Elemente in der Zeichenfolge in Dom-Elemente konvertieren, was nicht gewollt ist. – Esko

true, ich möchte als Code nicht als Elemente anzeigen – Niqql

dann können Sie versuchen, $ (". Output"). Text ("" + string + ""); –

Wenn Sie Code anzeigen möchten, die korrekt eingerückt und kolorierte ist, können Sie eine Bibliothek verwenden, das zu tun, wie highlighjs.

Ich bin mir nicht sicher, ob es automatische Einrückung, aber der Algorithmus dafür ist nicht so schwer: einfach Newline und genügend Leerzeichen hinzufügen, wenn ein neues HTML-Tag geöffnet (Rekursion wird diesen Weg einfacher).

Sie können auch js-beautify verwenden.

Quelle

2017-02-17 09:51:01

danke, ich lese das ein – Niqql

Formatcode, der in div angezeigt wird

Antwort

Verwandte Themen