innerHTML removes attribute quotes in Internet Explorer
When you get the innerHTML of a DOM node in IE, if there are no spaces in an attribute value, IE will remove the quotes around it, as demonstrated below:
<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>
In IE, the alert will read:
<DIV id=div2></DIV>
This is a problem, because I am passing this on to a processor that requires valid XHTML, and all attribute values must be quoted. Does anyone know of an easy way to work around this behavior in IE?
Answer
IE innerHTML is very annoying indeed. I wrote this function for it, which may be helpfull? It quotes attributes and sets tagnames to lowercase. By the way, to make it even more annoying, IE's innerHTML doesn't remove quotes from non standard attributes.
Edit based on comments
The function now processes more characters in attribute values and optionally converts attribute values to lower case. The function looks even more ugly now ;~). If you want to add or remove characters to the equation, edit the [a-zA-Z\.\:\[\]_\(\)\&\$\%#\@\!0-9]+[?\s+|?>] part of the regular expressions.
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;
}
Example key-value pairs that should work
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"