Использование 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. Вот сообщение об ошибке, которое он выдает, если я попытаюсь это сделать:

  

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

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

Answer 1

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

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:

  

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

     

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

Answer 3

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

<Ол>

Используйте < или < вместо <
Используйте > или > вместо >

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

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

Answer 4

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

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

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

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

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

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