javascript - 在遵守 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

您可以将函数包装<script>...</script>在文档中其他位置的单独标签中，并使用...

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

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

要解决这个问题，我们可以做两件事之一。最简单的方法，特别是如果 Javascript 包含不止一两行，是使 Javascript 位于页面外部，导致它们在脚本标记之间没有任何内容，以停止页面验证。

如果它只有一两行，那么可能不值得制作外部脚本，因此您需要将内容留在脚本标签之间并告诉验证器这将被忽略。我们通过将 Javascript 代码放在这样的 CDATA 标记中来做到这一点......

Answer 2

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

1. 使用<or<代替<
   使用>or>代替>
   
2. 获取图片的id，比如“image1”，然后 document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text');

希望这有效。

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

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

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

Answer 4

输出内容时替换<by%3C和>by%3E并使用 unescape。

这不会验证：

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

这给出了相同的结果并验证：

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

Answer 5

把它放在 <script ...> 块中怎么样：

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