XML データを DIV で表示したい。私のxmlコードは以下の通りです:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>
すべての行間隔と xml タグをそのままで、div とまったく同じように表示したいと考えています。
これは可能ですか?
あなたの問題は、XML コードを DIV に入れようとしているのに、ブラウザーが XML タグを HTML タグとして解釈しようとすることだと思いますか? これを防ぐには、XML コード内のすべての「<」と「>」を HTML 特殊文字 > に置き換えます。<.
<
andの横に>
ある二重引用符とアンパサンドも置き換える必要があります。
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
これでうまくいきます。
美しく表示するためにXML コンテンツを「<」と「>」を pre タグ内に置き換えて配置します。
<pre lang="xml">+xml_content+</pre>
HTML を XHTML にシリアル化し、Content-Typeを指定して提供application/xhtml+xml
する必要がある場合 (これを行う必要があります)、解決策は 2 つあります。
まず、HTML5 モードで解析しない XML または HTML パーサーに伝えるCDATA エスケープ セクションを作成できます(そのため、XHTML にシリアル化して として機能することが重要ですapplication/xhtml+xml
)。それをまったく解析し、通過させるだけです):<![CDATA[
]]>
<![CDATA[ cr<'az>y text you w</>ant to display verbatim. ]]>
これが行うことは、マークアップと見なされる特殊文字を使用できるようにすることだけです。テキストを単に「通過」させます。
次に、このCDATA セクション<pre></pre>
を要素内に配置する必要があります。これにより、XML のフォーマットがそのまま保持<code></code>
されます (ユース ケースによっては、コードを意味的により健全にする要素を追加することもできます)。これを省略した場合、表示したいテキストは<span>
要素のスタイルで表示されます。つまり、フローに準拠したプレーンなインライン テキストとして表示されます。div
これが、その周りをシンプルにするだけでは不十分な理由です。
以下は、私が正常にテストしたスニペットです。ソースコードにあったように、インデントを残していることに注意してpre
ください.結果はそのままの内容になるため、テキストの前の空白は各行の左側に保持されます。
<div>
<pre><![CDATA[
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>]]>
</pre>
</div>
まったく別のオプションは、マークアップを定義するすべての文字をエンティティ エスケープすることです。最も重要なのは、これらは<
andであり、それぞれ および>
として表現する必要があります。これを行うスタンドアロンのツールがありますが、一部のテキスト エディター プラグインでも実行できます。ただし、これには追加の処理手順が必要であり、事態が複雑になる可能性があります。ただし、テキストのラッパーは引き続き必要です。XHTML にシリアライズする必要がないというポジティブな側面もあります。<
>
<pre>