Question

当你在IE中获得DOM节点的innerHTML时，如果属性值中没有空格，IE将删除它周围的引号，如下所示：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="div1"><div id="div2"></div></div>
        <script type="text/javascript">
            alert(document.getElementById("div1").innerHTML);
        </script>
    </body>
</html>

在IE中，警报将显示为：

<DIV id=div2></DIV>

这是一个问题，因为我将此传递给需要有效XHTML的处理器，并且必须引用所有属性值。有没有人知道在IE中解决这种行为的简单方法？

Answer 1

IE innerHTML确实很烦人。我为它写了这个函数，这可能有帮助吗？它引用属性并将标记名设置为小写。顺便说一下，为了让它更烦人，IE的innerHTML不会删除非标准属性的引号。

根据评论进行修改 该函数现在处理属性值中的更多字符，并可选择将属性值转换为小写。这个功能现在看起来更难看了~~）。如果要在等式中添加或删除字符，请编辑正则表达式的[a-zA-Z\.\:\[\]_\&\$\%#\@\!0-9]+[?\s+|?>]部分。

function ieInnerHTML(obj, convertToLowerCase) {
    var zz = obj.innerHTML ? String(obj.innerHTML) : obj
       ,z  = zz.match(/(<.+[^>])/g);    

    if (z) {
     for ( var i=0;i<z.length;(i=i+1) ){
      var y
         ,zSaved = z[i]
         ,attrRE = /\=[a-zA-Z\.\:\[\]_\(\)\&\$\%#\@\!0-9\/]+[?\s+|?>]/g
      ;

      z[i] = z[i]
              .replace(/([<|<\/].+?\w+).+[^>]/,
                 function(a){return a.toLowerCase();
               });
      y = z[i].match(attrRE);

      if (y){
        var j   = 0
           ,len = y.length
        while(j<len){
          var replaceRE = 
               /(\=)([a-zA-Z\.\:\[\]_\(\)\&\$\%#\@\!0-9\/]+)?([\s+|?>])/g
             ,replacer  = function(){
                  var args = Array.prototype.slice.call(arguments);
                  return '="'+(convertToLowerCase 
                          ? args[2].toLowerCase() 
                          : args[2])+'"'+args[3];
                };
          z[i] = z[i].replace(y[j],y[j].replace(replaceRE,replacer));
          j+=1;
        }
       }
       zz = zz.replace(zSaved,z[i]);
     }
   }
  return zz;
}

应该起作用的键值对示例

data-mydata=return[somevalue] => data-mydata="return[somevalue]"
id=DEBUGGED:true => id="DEBUGGED:true" (or id="debugged:true" if you use the convertToLowerCase parameter)
someAttribute=Any.Thing.Goes => someAttribute="Any.Thing.Goes"

Answer 2

啊，尝试在不支持XHTML的浏览器中使用XHTML的喜悦。

我只是接受你将从浏览器中取回HTML并在XML处理器前放置一些可以输入标签汤并输出XHTML的内容 - 例如HTML Tidy。

Answer 3

我在一年多前遇到了同样的问题，并使用InnerXHTML解决了这个问题，{{3}}是一个比我聪明的人编写的自定义脚本。它基本上是innerHTML的自定义版本，返回标准标记。

Answer 4

我已经对此进行了测试，它适用于大多数属性，除了那些带连字符的属性，例如class = day-month-title。它忽略了这些属性，并没有引用它们。

Answer 5

我可能是一年太晚但是这里去了。接受的答案可能会做到它所承诺的但是已经是星期五下午了，我需要更简单的东西，也没有时间去做。所以这是我的版本，它只引用没有引号的属性值，扩展它应该是非常简单的。

var t = "<svg id=foobar height=\"200\" width=\"746\"><g class=rules>";
t.replace(/([\w-]+)=([\w-]+)([ >])/g, function(str, $n, $v, $e, offset, s) {
    return $n + '="' + $v + '"' + $e;
});

Answer 6

此问题有一个快速而肮脏的解决方法。我在使用jQuery模板时使用它。只需在属性值中添加尾随空格即可。当然，对于示例中使用的id，这没有多大意义，所以这是另一个涉及jQuery和jQuery模板的示例：

http://jsfiddle.net/amamaenko/dW7Wh/5/

注意没有它的行<input value="${x} "/>中的尾随空格，该示例将不适用于IE。

Answer 7

你试过jquery吗？

alert($('#div1').html());

innerHTML删除Internet Explorer中的属性引号

7 个答案: