Utilizzo di tag HTML nelle stringhe JavaScript nel rispetto delle regole del W3C

Question

Ecco il mio codice:

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

Al W3C Markup Validator non piace questo. Non vuole tag HTML all'interno del mio codice JavaScript. Ecco il messaggio di errore che genera se provo questo:

  

carattere " < " è il primo carattere di un delimitatore ma si è verificato come dati

Come posso risolvere questo problema assicurandomi che la mia pagina non si incasini se passo la stringa contenente tag HTML a document.getElementById('myElement').innerHTML?

Answer 1

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

Come con tutti i valori di attributo, è necessario codificare HTML &, < e il delimitatore di attributo (" qui). Il fatto che sia JavaScript all'interno del valore dell'attributo non fa alcuna differenza; il valore dell'attributo HTML viene decodificato prima che JavaScript lo guardi.

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

Questo è in contrasto con un elemento <script>, i cui contenuti sono CDATA e quindi non <![CDATA[ - sono sfuggiti in HTML4. In XHTML non ci sono elementi CDATA; puoi aggiungere una sezione <=> per fare in modo che XHTML si comporti allo stesso modo, ma di solito è più semplice sia per gli elementi di script che per gli attributi del gestore eventi per evitare il problema non usando mai un carattere <=> o <=>. In una stringa letterale è disponibile un'altra escape che puoi usare per aggirare questo:

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

Answer 2

Potresti racchiudere le tue funzioni all'interno di tag <script>...</script> separati da qualche altra parte nel documento e lì usare ...

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

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

  

Per risolvere questo problema, possiamo fare una delle due cose. Il modo più semplice, in particolare se il Javascript contiene più di una o due righe, è rendere il Javascript esterno alla pagina risultando che non sia nulla tra i tag dello script per interrompere la convalida della pagina.

     

Se è solo una o due righe, probabilmente non vale la pena creare uno script esterno, quindi vorrai lasciare il contenuto tra i tag dello script e dire al validatore che questo deve essere ignorato. Lo facciamo inserendo il codice Javascript all'interno di un tag CDATA come questo ...

Answer 3

Esistono molti modi per arrivarci.

1. Utilizza < o < invece di <
   Usa > o > invece di >
   
2. Ottieni un ID per l'immagine, come " image1 " ;, quindi document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');

Spero che funzioni.

Answer 4

Sostituisci < con %3C e > con %3E e usa la funzione Unescape durante la pubblicazione dei contenuti.

Questo non verrà convalidato:

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

Questo dà gli stessi risultati e convalida:

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

Answer 5

Che ne dici di metterlo in uno < script ... > block:

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

E più avanti nel tuo HTML:

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