为什么浏览器修改包含&#x上的HTML元素的ID?(Why does the browser mod

2019-10-17 15:27发布

说我有此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/&#x24;whatever是简单的字符串。 实际上,它转换&#x24; 以它提供的呈现( $ )。

然而,JavaScript代码使用文本字符串&#x24; 搜索的元素。 因此,调用document.getElementById失败,我从来没有拿到手就段落的价值。

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


编辑:
当然,我知道,我没有逃避$ 。 但网页获取生成和发电机确实逸出。 所以,我不得不应付我的本钱。

Answer 1:

<p id="...">时, &#x24; 序列被解释为$ ,因为它出现在一个属性,被视为一个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:

我建议你到HTML实体在JavaScript代码进行解码:

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


文章来源: Why does the browser modify the ID of an HTML element that contains &#x?