El uso de etiquetas HTML en cadenas JavaScript, cumpliendo con las normas de la W3C

Question

Aquí está mi código:

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

El W3C Markup Validator no le gusta esto.No quiere etiquetas HTML dentro de mi código JavaScript.Aquí está el mensaje de error se produce si se intenta esto:

carácter "<"es el primer carácter de un delimitador, pero se produjo como datos

Cómo puedo solucionar este problema, mientras que asegurarse de que mi página no estropear si me pasan la etiqueta HTML que contiene la cadena a document.getElementById('myElement').innerHTML?

Answer 1

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

Como con todos los valores de atributo, debe HTML-codificar &, <, y el atributo delimitador (" aquí).El hecho de que es JavaScript en el valor de atributo no hace ninguna diferencia;el valor de atributo HTML que es decodificado antes de JavaScript consigue una mirada en ella.

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

Esto es en contraste con un <script> elemento, cuyos contenidos son CDATA y por lo tanto no &-se escapó en HTML4.En XHTML no hay elementos CDATA;usted puede agregar un <![CDATA[ sección para hacer XHTML se comportan de la misma, pero es generalmente más sencillo para ambos elementos de script y controlador de eventos atributos para evitar el problema de nunca usar un & o < carácter.En un literal de cadena, otra forma de escapar está disponible que usted puede utilizar para conseguir alrededor de esto:

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

Answer 2

Puede incluir sus funciones en etiquetas <script>...</script> separadas en otro lugar del documento, y usar ...

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

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

  

Para solucionar este problema, podemos hacer una de dos cosas. La forma más sencilla, especialmente si el Javascript contiene más de una o dos líneas, es hacer que el Javascript sea externo a la página, lo que hace que no quede nada entre las etiquetas del script para detener la validación de la página.

     

Si es solo una o dos líneas, entonces probablemente no valga la pena crear un script externo, por lo que querrá dejar el contenido entre las etiquetas del script y decirle al validador que esto debe ser ignorado. Hacemos esto colocando el código Javascript dentro de una etiqueta CDATA como esta ...

Answer 3

Hay muchas formas de llegar allí.

1. Use < o < en lugar de <
   Use > o > en lugar de >
   
2. Obtenga una identificación de la imagen, como " image1 " ;, luego document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');

Espero que esto funcione.

Answer 4

Reemplazar < por %3C y > por %3E y el uso unescape a la hora de generar el contenido.

Esto no validar:

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

Esto le da los mismos resultados y valida:

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

Answer 5

¿Qué tal poner esto dentro de un < script ... > bloque:

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

Y luego en tu HTML:

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