在 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>...</script>标记内，并使用...

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

来自http://javascript.about.com/library/blxhtml.htm ：

要解决这个问题，可以做两件事之一。 最简单的方法，特别是如果Javascript包含的不仅仅是一行或两行，就是使页面外部的Javascript导致它们在脚本标记之间无效，以阻止页面验证。

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

Answer 2

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

1. 使用< 或者< 而不是<
   使用> 或者> 而不是>
   
2. 获取图像的id，例如“image1”，然后是document.getElementById("image1").onmouseover = showDescription(
'Text', 'Text with HTML tags in them<br />More text'); 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>元素形成对比， <script>元素的内容为CDATA ，因此不在HTML4中进行& #cacaped。 在XHTML中没有CDATA元素; 你可以添加一个<![CDATA[部分来使XHTML表现相同，但是对于脚本元素和事件处理程序属性来说通常更简单，因为从不使用&或<字符来避免这个问题。 在字符串文字中，可以使用另一个转义，您可以使用它来解决此问题：

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

Answer 4

将< by %3C和>替换为%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">

Answer 6

<div id="your-text"></div>
document.getElementById('your-text').innerHTML = yourText;