W3Cルールに準拠しながらJavaScript文字列でHTMLタグを使用する

Question

ここに私のコードがあります：

<a href="#">
    <img src="myimage.jpg" 
     onmouseover="showDescription(
          'Text', 'Text with HTML tags in them<br />More text');" 
     onmouseout="revertDescription();" 
     alt="Image description">

W3C Markup Validatorはこれを好まない。 JavaScriptコード内にHTMLタグは必要ありません。これを試みると生成されるエラーメッセージを次に示します。

  

文字<！> quot; <！> lt; <！> quot;は区切り文字の最初の文字ですが、データとして発生しました

HTMLタグを含む文字列をdocument.getElementById('myElement').innerHTMLに渡すと、ページが混乱しないようにしながら、これを修正するにはどうすればよいですか？

Answer 1

onmouseover="showDescription('Text', 'Text with HTML tags in them<br />More text');" 

すべての属性値と同様に、&、<、および属性区切り文字（ここでは"）をHTMLエンコードする必要があります。属性値内のJavaScriptであるという事実に違いはありません。 JavaScriptがHTML属性値を見る前にHTML属性値がデコードされます。

onmouseover="showDescription('Text', 'Text with HTML tags in them<br />More text');" 

これは、コンテンツが<script>であり、HTML4でCDATAエスケープされていない<![CDATA[要素とは対照的です。 XHTMLにはCDATA要素はありません。 <=>セクションを追加してXHTMLを同じように動作させることができますが、通常は、スクリプト要素とイベントハンドラー属性の両方が<=>または<=>文字を使用しないことで問題を回避する方が簡単です。文字列リテラルでは、これを回避するために使用できる別のエスケープが利用可能です：

onmouseover="showDescription('Text', 'Text with HTML tags in them\x3Cbr />More text');" 

Answer 2

ドキュメント内の別の場所にある別の<script>...</script>タグで関数をラップできます。

<script>
//<![CDATA[
    ...code...
//]]>
</script>

http://javascript.about.com/library/blxhtml.htm：

  

この問題を解決するには、次の2つのいずれかを実行します。最も簡単な方法は、特にJavascriptに1行または2行以上しか含まれていない場合、ページの検証を停止するスクリプトタグの間にJavascriptが含まれないようにすることです。

     

1行または2行だけの場合は、外部スクリプトを作成する価値がない可能性が高いため、スクリプトタグの間にコンテンツを残して、これを無視することをバリデーターに伝えます。これを行うには、次のようにJavascriptコードをCDATAタグ内に配置します...

Answer 3

そこに到達する方法はたくさんあります。

1. <
   の代わりに<または<を使用します >
   
の代わりに>または>を使用します
2. <！> quot; image1 <！> quot;などの画像のIDを取得してから、 document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');

これがうまくいくことを願っています。

Answer 4

<を%3Cで、>を%3Eで置き換え、コンテンツの出力時にunescapeを使用します。

これは検証しません：

function(){
return ('<b> bold </b>');
}

これにより同じ結果が得られ、検証されます。

function(){
return unescape('%3Cb%3E bold %3C/b%3E'); 
}

Answer 5

これを<！> lt; script ... <！> gt;に入れてみてください。ブロック：

var myText = 'Text with HTML tags in them<br />More text';

HTMLの後半：

<a href="#">
    <img src="myimage.jpg" 
     onmouseover="showDescription(
          'Text', myText);" 
     onmouseout="revertDescription();" 
     alt="Image description">