在符合W3C规则的情况下在JavaScript字符串中使用HTML标记

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标记验证器不喜欢这个。它不希望我的JavaScript代码中包含HTML标记。以下是我尝试此操作时产生的错误消息：

  

字符<！> <;> <！> <！>是分隔符的第一个字符，但是作为数据出现

如果我将包含HTML标签的字符串传递给document.getElementById('myElement').innerHTML，确保我的页面不会搞乱，我该如何解决这个问题？

Answer 1

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

与所有属性值一样，您必须对< - >，&和属性定界符（<此处）进行HTML编码。事实上，它在属性值中的JavaScript没有区别;在JavaScript查看之前解码HTML属性值。

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

这与"元素形成对比，<script>元素的内容为CDATA，因而不是<![CDATA[ - 在HTML4中进行转义。在XHTML中没有CDATA元素;你可以添加一个<=>部分来使XHTML的行为相同，但是对于脚本元素和事件处理程序属性来说通常更简单，只是从不使用<=>或<=>字符来避免问题。在字符串文字中，可以使用另一个转义符来解决此问题：

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

有很多方法可以实现目标。

1. 使用<或<代替<
   使用>或>代替>
   
2. 获取图片的ID，例如<！>“; 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

如何将其放入<！> lt; script ... <！> gt;块：

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