在 JavaScript 字符串中使用 HTML 标签，同时遵守 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 标记验证器不喜欢这样。它不希望我的 JavaScript 代码中包含 HTML 标签。如果我尝试这样做，它会产生以下错误消息：

字符“<”是分隔符的第一个字符，但作为数据出现

如果我将包含 HTML 标记的字符串传递给 document.getElementById('myElement').innerHTML，如何解决此问题，同时确保我的页面不会混乱？

Answer 1

您可以将函数包装在文档中其他位置的单独 标记内，并使用 ...

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

From http://javascript.about.com/library/blxhtml.htm：

要解决此问题，我们可以执行以下两种操作之一。最简单的方法，特别是如果 Javascript 包含的不仅仅是一两行，就是使 Javascript 位于页面外部，导致它们在脚本标记之间不存在，从而停止页面验证。

如果只有一两行，那么可能不值得制作外部脚本，因此您需要将内容保留在脚本标记之间，并告诉验证器将忽略它。我们通过将 Javascript 代码放置在 CDATA 标记中来实现此目的，如下所示...

Answer 2

有很多方法可以到达那里。

1. 使用 < 或 < 代替 <
   使用 > 或 > 代替 >
2. 获取图像的 id，例如“image1 “， 然后
   document.getElementById("image1").onmouseover = showDescription(
'文本', '其中包含 HTML 标签的文本
更多文本');

希望这有效。

Answer 3

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');" 

这与内容为 CDATA 的

onmouseover="showDescription('Text', 'Text with HTML tags in them\x3Cbr />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">