[解決済み] javascriptでXMLをきれいに印刷する
2022-05-05 03:40:08
質問
インデントされていないXMLを表す文字列があり、それをプリティプリントしたいのですが、どうすればよいでしょうか?例えば
<root><node/></root>
になるはずです。
<root>
<node/>
</root>
シンタックスハイライトは必須ではありません。この問題に取り組むために、私はまずXMLを変換してキャリッジリターンとホワイトスペースを追加し、その後に プリ タグを使用してXMLを出力します。改行や空白を追加するために、以下のような関数を書きました。
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;
}
そして、このような関数を呼び出す。
jQuery('pre.formatted-xml').text(formatXml('<root><node1/></root>'));
これは私にとっては完全にうまくいくのですが、前の関数を書いているときに、もっといい方法があるに違いないと思いました。そこで質問なのですが、XMLの文字列を与えて、それをhtmlページにきれいに印刷する良い方法をご存知でしょうか?この仕事をすることができる任意のjavascriptフレームワークやプラグインは歓迎されます。私の唯一の要件は、これがクライアント側で実行されることです。
解決するには?
質問文より 文字列の結果が期待されているような印象を受けます。 HTML フォーマットの結果とは対照的です。
もしそうであれば
これを実現する最も簡単な方法は、XMLドキュメントを
アイデンティティ変換
で、かつ
<xsl:output indent="yes"/>
インストラクション
:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output omit-xml-declaration="yes" indent="yes"/> <xsl:template match="node()|@*"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> </xsl:copy> </xsl:template> </xsl:stylesheet>
提供されたXML文書にこの変換を適用する場合。
<root><node/></root>
ほとんどの XSLT プロセッサー (.NET XslCompiledTransform、Saxon 6.5.4 および Saxon 9.0.0.2, AltovaXML) は望みの結果を生成します。
<root> <node /> </root>
関連
-
JavaScriptの関数この指摘の問題を説明
-
Vueにシンプルなメモ帳機能を実装
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
JSアレイループと効率解析の比較
-
jQueryのコピーオブジェクトの説明
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] JavaからXMLをきれいに印刷する方法は?