innerHTML удаляет кавычки атрибутов в Internet Explorer
когда вы получаете 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 ответов
IE innerHTML очень раздражает. Я написал эту функцию для него, которая может быть полезной? Он цитирует атрибуты и устанавливает tagnames в нижний регистр. Кстати, чтобы сделать его еще более раздражающим, 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"
Ах, радость от попытки использовать XHTML в браузере, который его не поддерживает.
Я бы просто принял, что вы собираетесь получить HTML обратно из браузера и положить что - то перед вашим процессором XML, который может вводить суп тегов и выводить XHTML -HTML Tidy например.
Я столкнулся с этой же проблемой чуть более года назад и решил ее с помощью InnerXHTML пользовательский скрипт, написанный кем-то гораздо умнее меня. Это в основном пользовательская версия innerHTML, которая возвращает стандартную разметку.
Я проверил это, и он работает для большинства атрибутов, за исключением тех, которые переносятся, таких как class=day-month-title. Он игнорирует эти атрибуты и не цитирует их.
Я, возможно, на пару лет опоздал, но вот идет. Принятый ответ может сделать то, что он обещает, но уже вечер пятницы, и мне нужно что-то попроще, и у меня нет времени пройти через это. Итак, вот моя версия, которая будет просто цитировать значения атрибутов без кавычек, и ее расширение должно быть довольно тривиальным.
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;
});
существует быстрый и грязный обходной путь для этой проблемы. Я использовал его при работе с jQuery шаблоны. Просто добавьте конечное пространство к значению атрибута. Конечно, это не имеет большого смысла с id, который используется в Примере, поэтому вот еще один пример с участием jQuery и шаблонов jQuery:
http://jsfiddle.net/amamaenko/dW7Wh/5/
обратите внимание на пробел в строке <input value="${x} "/> без него пример не будет работать на IE.