Использование HTML-тегов в строках JavaScript при соблюдении правил W3C

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 это не нравится. Он не хочет HTML-теги внутри моего кода JavaScript. Вот сообщение об ошибке, которое он выдает, если я попытаюсь это сделать:

символ "<" является первым символом разделителя, но встречается как данные </p>

Как я могу это исправить, убедившись, что моя страница не испортилась, если я передал строку, содержащую тег HTML, в document.getElementById('myElement').innerHTML?

Answer 1

Вы можете заключить свои функции в отдельные теги <script>...</script> где-нибудь еще в документе, и там использовать ...

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

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

Чтобы решить эту проблему, можно сделать одну из двух вещей. Самый простой способ, особенно если Javascript содержит больше, чем одну или две строки, состоит в том, чтобы сделать Javascript внешним по отношению к странице, чтобы между тегами сценария не было ничего, что могло бы остановить проверку страницы.

Если это всего одна или две строки, то, вероятно, не стоит создавать внешний скрипт, поэтому вы захотите оставить содержимое между тегами скрипта и сообщить валидатору, что это следует игнорировать. Мы делаем это, помещая код Javascript в тег CDATA следующим образом ...

Answer 2

Есть много способов добраться туда.

1. Используйте < или < вместо <
   Используйте > или > вместо >
   
2. Получить идентификатор для изображения, например, «image1», затем document.getElementById("image1").onmouseover = showDescription(<br> 'Text', 'Text with HTML tags in them<br />More text');

Надеюсь, это сработает.

Answer 3

Замените < на %3C и > на %3E и используйте unescape при выводе содержимого.

Это не будет подтверждено:

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

Это дает те же результаты и подтверждает:

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

Answer 4

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

Как и для всех значений атрибутов, вы должны кодировать HTML &, < и разделитель атрибутов (" здесь). Тот факт, что внутри значения атрибута находится JavaScript, не имеет значения; значение атрибута HTML декодируется до того, как его увидит JavaScript.

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

Это в отличие от элемента <script>, содержимое которого CDATA и, следовательно, не & -экранируется в HTML4. В XHTML нет элементов CDATA; Вы можете добавить секцию <![CDATA[, чтобы заставить XHTML вести себя одинаково, но как элементам скрипта, так и атрибутам обработчика событий обычно проще избежать проблемы, никогда не используя символ & или <. В строковом литерале доступен другой escape, который вы можете использовать, чтобы обойти это:

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

Answer 5

Как насчет размещения этого в блоке :

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