Ich habe eine Zeichenfolge, die ein nicht eingerücktes XML darstellt, das ich schön drucken möchte. Beispielsweise:
<root><node/></root>
soll werden:
<root>
<node/>
</root>
Syntaxhervorhebung ist keine Voraussetzung. Um das Problem zu lösen, transformiere ich zuerst das XML, um Zeilenumbrüche und Leerzeichen hinzuzufügen, und verwende dann ein Pre- Tag, um das XML auszugeben. Um neue Linien und Leerzeichen hinzuzufügen, habe ich die folgende Funktion geschrieben:
function formatXml(xml) {
var formatted = '';
var reg = /(>)(<)(\/*)/g;
xml = xml.replace(reg, '$1\r\n$2$3');
var pad = 0;
jQuery.each(xml.split('\r\n'), function(index, node) {
var indent = 0;
if (node.match( /.+<\/\w[^>]*>$/ )) {
indent = 0;
} else if (node.match( /^<\/\w/ )) {
if (pad != 0) {
pad -= 1;
}
} else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
indent = 1;
} else {
indent = 0;
}
var padding = '';
for (var i = 0; i < pad; i++) {
padding += ' ';
}
formatted += padding + node + '\r\n';
pad += indent;
});
return formatted;
}
Ich rufe dann die Funktion folgendermaßen auf:
jQuery('pre.formatted-xml').text(formatXml('<root><node1/></root>'));
Das funktioniert für mich einwandfrei, aber während ich die vorherige Funktion schrieb, dachte ich, dass es einen besseren Weg geben muss. Meine Frage ist also, ob Sie eine XML-Zeichenfolge besser kennen, um sie auf einer HTML-Seite hübsch auszudrucken. Alle Javascript-Frameworks und / oder Plugins, die diese Aufgabe übernehmen könnten, sind willkommen. Meine einzige Anforderung ist, dass dies auf der Client-Seite erfolgt.
quelle
Antworten:
Aus dem Text der Frage habe ich den Eindruck, dass ein Zeichenfolgenergebnis erwartet wird , im Gegensatz zu einem HTML-formatierten Ergebnis.
In diesem Fall besteht der einfachste Weg, dies zu erreichen, darin, das XML-Dokument mit der Identitätstransformation und einer
<xsl:output indent="yes"/>
Anweisung zu verarbeiten :Wenn Sie diese Umwandlung auf das bereitgestellte XML-Dokument anwenden:
Die meisten XSLT-Prozessoren (.NET XslCompiledTransform, Saxon 6.5.4 und Saxon 9.0.0.2, AltovaXML) liefern das gewünschte Ergebnis:
quelle
Leichte Änderung der Javascript-Funktion von efnx clckclcks. Ich habe die Formatierung von Leerzeichen in Tabulatoren geändert, aber vor allem habe ich zugelassen, dass Text in einer Zeile bleibt:
quelle
<?xml ... ?>
Deklaration am Anfang des XML-Textes korrekt zu behandelnDies kann mit nativen Javascript-Tools ohne Bibliotheken von Drittanbietern erfolgen, wodurch die Antwort von @Dimitre Novatchev erweitert wird:
Ausgänge:
JSFiddle
Beachten Sie, wie von @ jat255 hervorgehoben, dass hübsches Drucken mit
<xsl:output indent="yes"/>
von Firefox nicht unterstützt wird. Es scheint nur in Chrome, Opera und wahrscheinlich den übrigen Webkit-basierten Browsern zu funktionieren.quelle
private makeSingleLine(txt: string): string { let s = txt.trim().replace(new RegExp("\r", "g"), "\n"); let angles = ["<", ">"]; let empty = [" ", "\t", "\n"]; while (s.includes(" <") || s.includes("\t<") || s.includes("\n<") || s.includes("> ") || s.includes(">\t") || s.includes(">/n")) { angles.forEach(an => { empty.forEach(em => { s = s.replace(new RegExp(em + an, "g"), an); }); }); } return s.replace(new RegExp("\n", "g"), " "); }
xsl:output
Tag berücksichtigt , sodass Sie nicht das Schöne bekommen Formatierung trotzdem.Persönlich verwende ich Google-Code-Prettify mit dieser Funktion:
quelle
Ich habe diesen Thread gefunden, als ich eine ähnliche Anforderung hatte, aber den OP-Code wie folgt vereinfacht habe:
funktioniert bei mir!
quelle
Oder wenn Sie nur eine andere js-Funktion möchten, habe ich Darins (viel) geändert:
quelle
Alle hier angegebenen Javascript-Funktionen funktionieren nicht für ein XML-Dokument mit nicht angegebenen Leerzeichen zwischen dem End-Tag '>' und dem Start-Tag '<'. Um sie zu beheben, müssen Sie nur die erste Zeile in den Funktionen ersetzen
durch
quelle
Wie wäre es, wenn Sie einen Stub-Knoten erstellen (document.createElement ('div') - oder Ihr Bibliotheksäquivalent verwenden), ihn mit der XML-Zeichenfolge (über innerHTML) füllen und eine einfache rekursive Funktion für das Stammelement / oder das Stub-Element aufrufen, falls Sie dies tun Ich habe keine Wurzel. Die Funktion würde sich für alle untergeordneten Knoten aufrufen.
Sie könnten dann auf dem Weg die Syntax hervorheben, sicherstellen, dass das Markup gut geformt ist (automatisch vom Browser beim Anhängen über innerHTML ausgeführt) usw. Es wäre nicht so viel Code und wahrscheinlich schnell genug.
quelle
Wenn Sie nach einer JavaScript-Lösung suchen, nehmen Sie einfach den Code aus dem Pretty Diff-Tool unter http://prettydiff.com/?m=beautify
Sie können Dateien auch mit dem Parameter s an das Tool senden, z. B .: Http://prettydiff.com/?m=beautify&s=https://stackoverflow.com/
quelle
quelle
quelle
XMLSpectrum formatiert XML, unterstützt das Einrücken von Attributen und hebt die Syntax für XML und alle eingebetteten XPath-Ausdrücke hervor:
XMLSpectrum ist ein Open-Source-Projekt, das in XSLT 2.0 codiert ist. Sie können diese Server-Seite also mit einem Prozessor wie Saxon-HE (empfohlen) oder Client-Seite mit Saxon-CE ausführen.
XMLSpectrum ist noch nicht für die Ausführung im Browser optimiert - daher die Empfehlung, diese serverseitig auszuführen.
quelle
Verwenden Sie die obige Methode für hübschen Druck und fügen Sie diese dann mit der Methode jquery text () in ein beliebiges div ein . Zum Beispiel wird
xmldiv
dann die ID von div verwendet:$("#xmldiv").text(formatXml(youXmlString));
quelle
Hier ist eine weitere Funktion zum Formatieren von XML
quelle
Sie können hübsch formatierte XML mit XML-Verschönerung erhalten
Einzug : Einzugmuster wie Leerzeichen
useSelfClosingElement : true => Verwenden Sie ein selbstschließendes Element, wenn das Element leer ist.
JSFiddle
Original (vorher)
Verschönert (nach)
quelle
quelle
Xml-to-json- Bibliothek hat Methode
formatXml(xml).
Ich bin der Betreuer des Projekts.quelle