Utilisation de balises HTML dans des chaînes JavaScript tout en respectant les règles du W3C

Question

Voici mon code:

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

Le validateur de balisage du W3C n'aime pas cela. Il ne veut pas de balises HTML dans mon code JavaScript. Voici le message d'erreur qu'il génère si j'essaie ceci:

  

caractère & "; < &"; est le premier caractère d'un délimiteur mais est apparu sous forme de données

Comment puis-je résoudre ce problème tout en m'assurant que ma page ne soit pas gâchée si je passe la chaîne contenant une balise HTML à document.getElementById('myElement').innerHTML?

Answer 1

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

Comme avec toutes les valeurs d'attribut, vous devez coder HTML &, < et le délimiteur d'attribut (" ici). Le fait que JavaScript soit contenu dans la valeur de l'attribut ne fait aucune différence. la valeur de l'attribut HTML est décodée avant que JavaScript ne l'examine.

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

Ceci contraste avec un élément <script> dont le contenu est CDATA et donc pas <![CDATA[ - échappé en HTML4. En XHTML, il n'y a pas d'éléments CDATA; vous pouvez ajouter une section <=> pour que XHTML se comporte de la même manière, mais il est généralement plus simple pour les éléments de script et les attributs de gestionnaire d'événement d'éviter le problème simplement en n'utilisant jamais un caractère <=> ou <=>. Dans un littéral de chaîne, il existe un autre échappement que vous pouvez utiliser pour contourner ce problème:

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

Answer 2

Vous pouvez envelopper vos fonctions dans des balises <script>...</script> séparées, ailleurs dans le document, et y utiliser ...

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

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

  

Pour résoudre ce problème, nous pouvons faire l'une des deux choses suivantes. Le moyen le plus simple, en particulier si le code Javascript contient plus d’une ou deux lignes, consiste à rendre le code Javascript externe à la page, de sorte qu’il ne reste rien entre les balises de script pour arrêter la validation de la page.

     

S'il ne s'agit que d'une ou deux lignes, il ne vaut probablement pas la peine de créer un script externe. Vous voudrez donc laisser le contenu entre les balises de script et indiquer au validateur qu'il doit être ignoré. Nous faisons cela en plaçant le code Javascript dans une balise CDATA comme ceci ...

Answer 3

Il y a plusieurs façons d'y arriver.

1. Utilisez < ou < au lieu de <
   Utilisez > ou > au lieu de >
   
2. Obtenir un identifiant pour l'image, tel que " image1 " ;, puis document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');

J'espère que cela fonctionne.

Answer 4

Remplacez < par %3C et > par %3E et utilisez unescape pour générer le contenu.

Ceci ne validera pas:

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

Ceci donne les mêmes résultats et valide:

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

Answer 5

Pourquoi ne pas placer ceci dans un < script ... > bloc:

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

Et plus tard dans votre code HTML:

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