Question

说我有这个HTML页面：

<html>
  <head>
    <script type="text/javascript">
      function echoValue(){
        var e = document.getElementById("/path/&#x24;whatever");
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>

我认为浏览器会将ID字符串/path/$whatever视为简单字符串。实际上，它会将$转换为呈现的表示形式（$）。

然而，javascript代码使用文字字符串$来搜索元素。因此，调用document.getElementById失败了，我从未接受过段落的价值。

有没有办法强制浏览器按字面意思使用给定的ID字符串？

修改
当然我知道我不必逃避$。但是生成了网页并且生成器进行了转义。所以，我必须应付我所拥有的。

Answer 1

在<p id="...">中，$序列被解释为$，因为它出现在属性中并被视为HTML实体。所有其他元素属性也是如此。

在<script>元素中，HTML实体根本不被解释，所以它按字面显示。

Answer 2

您可以尝试在不使用jQuery的情况下解码javascript文本：

<html>
  <head>
    <script type="text/javascript">
      function decodeEntity(text){
        text = text.replace(/<(.*?)>/g,''); // strip out all HTML tags, to prevent possible XSS
        var div = document.createElement('div');
        div.innerHTML = text;
        return div.textContent?div.textContent:div.innerText;
      }
      function echoValue(){
        var e = document.getElementById(decodeEntity("/path/&#x24;whatever"));
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>

JSFiddle：http://jsfiddle.net/phTkC/

Answer 3

我建议你在javascript代码中解码HTML实体：

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
      function echoValue(){
        var decoded_string = $('<div />').html("/path/&#x24;whatever").text();
        var e = document.getElementById(decoded_string);
        if(e) {
          alert(e.innerHTML);
        }
        else {
          alert("not found\n");
        }
      }
    </script>
  </head>
  <body>
    <p id="/path/&#x24;whatever">The Value</p>
    <button onclick="echoValue()">Tell me</button>
  </body>
</html>

为什么浏览器会修改包含＆amp; #x的HTML元素的ID？

3 个答案: