innerHTML 删除 Internet Explorer 中的属性引号答案

【问题标题】：innerHTML removes attribute quotes in Internet ExplorerinnerHTML 删除 Internet Explorer 中的属性引号
【发布时间】：2010-11-16 22:27:15
【问题描述】：

在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 中解决此问题的简单方法？

【问题讨论】：

标签： javascript internet-explorer xhtml innerhtml

【解决方案1】：

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

基于 cmets 编辑 该函数现在处理属性值中的更多字符，并可选择将属性值转换为小写。这个函数现在看起来更丑了;~)。如果您想在等式中添加或删除字符，请编辑正则表达式的 [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"

【讨论】：

我没有对此进行测试，但无论如何我都会选择它作为接受的答案，因为它最接近于成为问题的独立解决方案。
好的，谢谢。在我的测试中它有效，但没有彻底测试它。出于好奇：谁认为这个答案值得 -1 分？为什么？
我记得当我不得不使用一个巨大的遗留应用程序时，所有逻辑都使用innerHTML。我记得在其中一个示例中出现的问题，在 tbody 标记中使用 innerHTML 是只读的（与其他一些元素一样）。
+1 做得很好。更好的还有小写样式属性，例如style="DISPLAY: none"。
顺便说一句，尽管一切顺利（见示例），据我所知，并非所有字符都允许作为所有属性的属性值，所以如果你追求的是有效的 xhtml，你应该小心使用这些值。

【解决方案2】：

啊，尝试在不支持 XHTML 的浏览器中使用它的乐趣。

我只能接受您将从浏览器获取 HTML 并在您的 XML 处理器前面放置一些东西，该处理器可以输入标签汤并输出 XHTML——例如HTML Tidy。

【讨论】：

这实际上是我最终采用的解决方案。我选择使用 lxml Python 库。

【解决方案3】：

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

【讨论】：

是的，我看过这个库，但我不想使用它，因为它是根据知识共享署名-相同方式共享 3.0 许可授权的。
很公平。我使用它时的雇主对此很好，但我知道情况并非总是如此。
嘿，我很欣赏信任投票，但 OP 已经声明图书馆的许可条款不符合他的需求。

【解决方案4】：

我可能晚了几年，但这里是。接受的答案可能会实现它的承诺，但已经是星期五下午了，我需要一些更简单的东西，也没有时间完成它。所以这是我的版本，它只引用不带引号的属性值，扩展它应该很简单。

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;
});

【讨论】：

【解决方案5】：

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

【讨论】：

另外，我必须将正则表达式更改为： /\s]+))?)+\s*|\s*)\/?>/g 才会起作用。

【解决方案6】：

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

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

注意<input value="${x} "/> 行中的尾随空格，如果没有它，该示例将无法在 IE 上运行。

【讨论】：

【解决方案7】：

你用 jquery 试过了吗？

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

【讨论】：

是的。 jQuery 使用 innerHTML 来返回它的值，他们还没有解决这个问题。我把 jQuery 拿出来只是为了更清楚问题出在哪里。