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 마크 업 유효성 검사기는 이것을 좋아하지 않습니다. 내 JavaScript 코드 내부에서 HTML 태그를 원하지 않습니다. 다음은 내가 이것을 시도하면 생성되는 오류 메시지입니다.

캐릭터 "<"는 구분 기의 첫 번째 캐릭터이지만 데이터로 발생했습니다.

HTML 태그 함유 문자열을 document.getElementById('myElement').innerHTML?

Answer 1

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

모든 속성 값과 마찬가지로 html-encode해야합니다 &, <, 및 속성 구분 기호 (" 여기). 속성 값 내부의 JavaScript라는 사실은 차이가 없습니다. JavaScript가이를 살펴보기 전에 HTML 속성 값이 디코딩됩니다.

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

이것은 a와 대조적입니다 <script> 내용이있는 요소 CDATA 따라서 그렇지 않습니다 &-HTML4에 escaped. XHTML에는 cdata 요소가 없습니다. 당신은 추가 할 수 있습니다 <![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:

이 문제를 해결하기 위해 Wer는 두 가지 중 하나를 수행 할 수 있습니다. 가장 간단한 방법은 특히 JavaScript에 단 하나 또는 두 줄 이상이 포함 된 경우 페이지 외부의 JavaScript를 만드는 것입니다.

단지 하나 또는 두 줄인 경우 외부 스크립트를 만드는 것이 가치가 없으므로 스크립트 태그 사이에 내용을 남겨두고 검증기에게 무시해야한다고 말할 것입니다. 우리는 JavaScript 코드를 이와 같은 CDATA 태그에 배치하여이를 수행합니다 ...

Answer 3

거기에 도착하는 방법에는 여러 가지가 있습니다.

1. 사용 < 또는 < 대신에 <
   사용 > 또는 > 대신에 >
   
2. "image1"과 같은 이미지에 ID를 가져 오면document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');

이것이 효과가 있기를 바랍니다.

Answer 4

바꾸다 < ~에 의해 %3C 그리고 > ~에 의해 %3E 내용을 출력 할 때는 에스케이프를 사용하십시오.

이것은 검증되지 않습니다 :

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

이것은 동일한 결과를 제공하고 검증합니다.

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

Answer 5

이것을 내 안에 넣는 것은 어떻습니까u003Cscript ...> block:

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">