21

<pre>ブログのタグを使用してコードを投稿しています。に変更<する必要があることはわかっています。正しいhtmlのためにエスケープする必要がある他の文字はありますか？&lt;>&gt;

4

4 に答える 4

14

<pre>タグを使用してブログにHTMLマークアップを表示するとどうなりますか。

<pre>Use a <span style="background: yellow;">span tag with style attribute</span> to hightlight words</pre>

これはHTML検証に合格しますが、期待される結果が得られますか？いいえ。正しい方法は次のとおりです。

<pre>Use a &lt;span style=&quot;background: yellow;&quot;&gt;span tag with style attribute&lt;/span&gt; to hightlight words</pre>

別の例：preタグを使用して他の言語コードを表示する場合でも、HTMLエンコーディングが必要です。

<pre>if (i && j) return;</pre>

これにより期待どおりの結果が得られる可能性がありますが、HTML検証に合格しますか？いいえ。正しい方法は次のとおりです。

<pre>if (i &amp;&amp; j) return;</pre>

簡単に言うと、他のタグと同じように、プレタグのコンテンツをHTMLエンコードします。

于 2012-10-22T11:07:11.467 に答える
8

TL; DR

<pre>これはスタイル専用であるため、すべてのHTMLをエスケープする必要があることに注意してください。

あなただけのHTML「化石」：<xmp>タグを使用

これはよく知られていませんが、実際に存在し、Chromeでもサポートされていますが、タグのペアを使用することをお勧めしません-これはHTMLの化石のためだけですが、個人的なコンテンツを処理するための非常に簡単な方法です、例：DOCS。w3.org Wikiでさえ、その例で「いいえ、本当に。使用しないでください」と述べています。<xmp>

中に任意のHTML（</xmp>終了タグを除く）を入れることができます<xmp></xmp>

<xmp>
<html> <br> just any other html tags...
</xmp>

適切なバージョン

適切なバージョンは、文字列として保存され、いくつかのエスケープ関数/メカニズムの助けを借りて表示されるHTMLと見なすことができます。

1つだけ覚えておいてください-Cのような言語の文字列は通常一重引用符または二重引用符の間に書かれます-文字列を二重引用符で囲む場合=>文字列を単一引用符で囲む場合は（おそらく）で二重符をエスケープする必要があり\ます=>エスケープシングル（おそらく\）..。

最も頻繁な-サーバー側の言語エスケープ（例：PHP）

サーバーサイドスクリプト言語には、HTMLをエスケープするための組み込み関数が含まれていることがよくあります。

<?php
   $html = "<html> <br> or just any other HTML"; //store html
   echo htmlspecialchars($html); //display escaped html
?>

PHP 8.1ENT_QUOTESでは変更が加えられたため、フラグを指定する必要がなくなったことに注意してください。

フラグがENT_COMPATからENT_QUOTESに変更されました| ENT_SUBSTITUTE | ENT_HTML401。

クライアント側の方法（JavaScript / JS＆jQueryの例）

サーバー側と同様のアプローチは、クライアント側のスクリプトでも実現できます。

純粋なJavaScript

関数はありませんが、要素innerTextまたはノードtextContentを設定した場合のデフォルトの動作があります。

document.querySelector('.myTest').innerText = "<html><head>...";
document.querySelector('.myTest').textContent = "<html><head>...";

HTMLElement.innerTextと同じものではありません！上記のMDNドキュメントリンクで違いについて詳しく知ることができますNode.textContent

jQuery（JSライブラリ）

jQueryに$jqueryEl.text()はこの目的があります：
$('.mySomething .test').text("<html><head></head><body class=\"test\">...");

サーバーサイドの場合と同じことを覚えておいてください。Cのような言語では、文字列をラップした引用符をエスケープします。

于 2015-04-29T14:43:32.720 に答える
-1

マークアップ内にコードを投稿するには、<code>タグを使用することをお勧めします。preと同じように機能しますが、意味的に正しいと見なされます。

それ以外の場合、<code>と<pre>はアングルブラケットのみをエンコードする必要があります。

于 2009-08-13T16:42:00.970 に答える
-5

これを使用して、それらのいずれについても心配しないでください。

<pre>
${fn:escapeXml('
  <!-- all your code -->
')};
</pre>

jQueryを機能させるには、jQueryを有効にする必要があります。

于 2014-12-17T23:15:31.530 に答える