InnerHTML удаляет кавычки атрибутов в Internet Explorer

Когда вы получите innerHTML DOM node в IE, если в значении атрибута нет пробелов, 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?

ОТВЕТЫ

Ответ 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"

Ответ 2

А, радость от попыток использовать XHTML в браузере, который его не поддерживает.

Я бы просто согласился с тем, что вы вернете HTML из браузера и поместите что-то перед своим XML-процессором, который может вводить суп-суп и выводить XHTML - HTML Tidy, например.

Ответ 3

Я столкнулся с этой же проблемой чуть более года назад и решил ее с помощью InnerXHTML, пользовательский script написан кем-то гораздо умнее меня. В основном это пользовательская версия innerHTML, которая возвращает стандартную разметку.

Ответ 4

Я тестировал это, и он работает для большинства атрибутов, кроме тех, которые переносятся с дефисами, например class= day-month-title. Он игнорирует эти атрибуты и не цитирует их.

Ответ 5

Я мог бы быть на пару лет слишком поздно, но здесь. Принятый ответ мог бы сделать то, что он promises, но уже в пятницу днем, и мне нужно что-то более простое, и у меня нет времени пройти. Итак, здесь моя версия, которая будет просто указывать значения атрибутов без кавычек, и это должно быть довольно тривиально, чтобы расширить ее.

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

Ответ 6

Существует быстрое и грязное решение этой проблемы. Я использовал его при работе с шаблонами jQuery. Просто добавьте конечное пространство к значению атрибута. Конечно, это не имеет большого смысла с идентификатором, который используется в примере, так что вот еще один пример с участием jQuery и шаблонов jQuery:

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

Обратите внимание на конечное пространство в строке <input value="${x} "/> без него, пример не будет работать в IE.

Ответ 7

Вы пытались с jquery?

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