innerHTML удаляет кавычки атрибутов в Internet Explorer - PullRequest
Новая
       20

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

13 голосов
/ 05 августа 2009

Когда вы получаете innerHTML узла DOM в 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?

Ответы [ 7 ]

17 голосов
/ 05 августа 2009

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"
5 голосов
/ 05 августа 2009

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

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

3 голосов
/ 05 августа 2009

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

2 голосов
/ 07 октября 2011

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

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;
});
2 голосов
/ 17 сентября 2009

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

0 голосов
/ 15 марта 2011

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

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

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

0 голосов
/ 05 августа 2009

вы пробовали с помощью jquery? 

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