Question

下面我有一个HTML标记，并使用JavaScript来提取widget属性的值。此代码会提醒<test>而不是<test>，因此浏览器会自动取消属性值：

alert(document.getElementById("hau").attributes[1].value)

<div id="hau" widget="&lt;test&gt;"></div>

我的问题是：

除了对属性内容进行双重转义外，是否可以以任何方式阻止此行为？（它看起来像这样：&lt;test&gt;）
有谁知道为什么浏览器会像这样？ HTML规范中是否有明确提及此行为的地方？

Answer 1

1）可以完成没有执行双重转义

看起来你的距离更近htmlEncode() 。如果您不介意使用jQuery

＆＃13;

alert(htmlEncode($('#hau').attr('widget')))

function htmlEncode(value){
  //create a in-memory div, set it's inner text(which jQuery automatically encodes)
  //then grab the encoded contents back out.  The div never exists on the page.
  return $('<div/>').text(value).html();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hau" widget="&lt;test&gt;"></div>

＆＃13;

如果您对纯香草js解决方案感兴趣

＆＃13;

alert(htmlEncode(document.getElementById("hau").attributes[1].value))
function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

＆＃13;

<div id="hau" widget="&lt;test&gt;"></div>

＆＃13;

2）为什么浏览器的行为如此？

只是因为这种行为，我们能够做一些特定的事情，比如在预填充的输入字段中包含引号，如下所示，如果插入{{1的唯一方法，这是不可能的是通过添加自己再次需要转义另一个字符，如"

＆＃13;

Answer 2

浏览器一解析文档就会取消属性值（提到here）。其中一个原因可能是，否则不可能在您的属性值中包含双引号（嗯，从技术上讲，如果您将值放在单引号中，那么您将无法包含值中的单引号。

也就是说，行为是无法阻止的，尽管如果你真的必须使用HTML实体作为其中一部分的值，你可以简单地将你的特殊字符转回代码中（我建议Underscore's escape这样做任务）。

为什么浏览器会自动unescape html标记属性值？

2 个答案: