4

JavaScriptでxmlをきれいに印刷するための最良の方法は何ですか？私はajax呼び出しを介してxmlコンテンツを取得し、このリクエストをtextareaに表示する前に、見栄えがするようにフォーマットしたいと思います:)

4

6 に答える 6

6

vkBeautify.jsプラグインを見てください

http://www.eslinstructor.net/vkbeautify/

それはまさにあなたが必要とするものです。プレーンなJavaScriptで記述されており、最小化された1.5K未満で、非常に高速です。5ミリ秒未満で完了します。50KXMLテキストを処理します。

于 2012-01-19T06:33:55.387 に答える
5

これはインデントを処理しませんが、<pre>または<textarea>タグ内で使用するためにXMLをエンコードするのに役立ちます。

/* hack to encode HTML entities */
var d = document.createElement('div'); 
var t = document.createTextNode(myXml); 
d.appendChild(t);
document.write('<pre>' + d.innerHTML + '</pre>');

また、の代わりに、<textarea>強調表示してノードを折りたたみ/展開できるようにする場合は、スーパーユーザーのChromeブラウザでのXMLの表示を参照してください。

于 2009-07-27T11:34:45.243 に答える
3

<pre>タグの利用についてはArjanに同意します。約2日前にこれを試す前に、html出力で「醜い」xmlコードを解読しようとしていました。人生をずっと楽にし、あなたを正気に保ちます。

于 2009-07-27T22:42:43.903 に答える
3

これは、ほとんどの場合に機能する小さな自己完結型のプリティファイアで、長い行をうまくインデントし、必要に応じて出力を色付けします。

function formatXml(xml,colorize,indent) { 
  function esc(s){return s.replace(/[-\/&<> ]/g,function(c){         // Escape special chars
    return c==' '?'&nbsp;':'&#'+c.charCodeAt(0)+';';});}            
  var sm='<div class="xmt">',se='<div class="xel">',sd='<div class="xdt">',
      sa='<div class="xat">',tb='<div class="xtb">',tc='<div class="xtc">',
      ind=indent||'  ',sz='</div>',tz='</div>',re='',is='',ib,ob,at,i;
  if (!colorize) sm=se=sd=sa=sz='';   
  xml.match(/(?<=<).*(?=>)|$/s)[0].split(/>\s*</).forEach(function(nd){
    ob=('<'+nd+'>').match(/^(<[!?\/]?)(.*?)([?\/]?>)$/s);             // Split outer brackets
    ib=ob[2].match(/^(.*?)>(.*)<\/(.*)$/s)||['',ob[2],''];            // Split inner brackets 
    at=ib[1].match(/^--.*--$|=|('|").*?\1|[^\t\n\f \/>"'=]+/g)||['']; // Split attributes
    if (ob[1]=='</') is=is.substring(ind.length);                     // Decrease indent
    re+=tb+tc+esc(is)+tz+tc+sm+esc(ob[1])+sz+se+esc(at[0])+sz;
    for (i=1;i<at.length;i++) re+=(at[i]=="="?sm+"="+sz+sd+esc(at[++i]):sa+' '+at[i])+sz;
    re+=ib[2]?sm+esc('>')+sz+sd+esc(ib[2])+sz+sm+esc('</')+sz+se+ib[3]+sz:'';
    re+=sm+esc(ob[3])+sz+tz+tz;
    if (ob[1]+ob[3]+ib[2]=='<>') is+=ind;                             // Increase indent
  });
  return re;
}

デモについては、https： //jsfiddle.net/dkb0La16/を参照してください

于 2021-04-12T10:04:20.787 に答える
1

これはこれを行うための最良の方法ではありませんが、xmlをテキストとして取得し、RegExpを使用して、ノードの深さとブレークラインに応じて「>」を見つけてタブに置き換えることができますが、RegExpについてはよくわかりません。申し訳ありません。 。

XSLTを使用し、javascriptを使用して変換することもできます。このリンク
を 確認して、このチュートリアルをご覧ください。

于 2009-07-27T10:55:34.997 に答える
1

prettydiff.com/markup_beauty.jsを使用してください。これは、無効なマークアップ、フラグメント、およびJSTLコードをサポートできます。

<c:out value="<strong>text</strong>"/>

このアプリケーションは、 prettydiff.comのWebツールを使用してデモできます。「美化」と「マークアップ」のオプションを選択するだけです。

XMLを美化するために適切なツールを使用し、恣意的に仕事を急がないことが重要です。それ以外の場合は、意図しない場所に空白トークンを追加し、意図した場所から削除します。生データの場合、これは結果として生じる可能性がありますが、人間の消費可能なコンテンツの場合、これは、特に再帰に関して、コードの整合性を破壊します。

于 2010-12-15T21:29:31.630 に答える