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でこの動作を回避する簡単な方法を知っている人はいますか？
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"
ああ、それをサポートしていないブラウザでXHTMLを使おうとする喜び。
ブラウザからHTMLを取得し、XMLプロセッサの前に、タグスープを入力してXHTMLを出力できるもの（たとえば、HTML Tidy ）を配置することを受け入れます。
私は数年遅すぎるかもしれませんが、ここに行きます。受け入れられた答えはそれが約束することをするかもしれませんが、それはすでに金曜日の午後であり、私はもっと簡単なものが必要であり、私はそれを通過する時間がありません。これが私のバージョンで、引用符なしで属性値を引用するだけで、それを拡張するのはかなり簡単なはずです。
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;
});
私は1年ほど前にこれとまったく同じ問題に遭遇し、私よりはるかに賢い人によって書かれたカスタムスクリプトであるInnerXHTMLを使用して問題を解決しました。これは基本的に、標準のマークアップを返すinnerHTMLのカスタムバージョンです。
私はこれをテストしましたが、class = day-month-titleのようにハイフンでつながれた属性を除いて、ほとんどの属性で機能します。それらの属性を無視し、引用しません。
この問題には、迅速で汚い回避策があります。jQueryテンプレートを操作するときに使用しました。属性の値に末尾のスペースを追加するだけです。もちろん、これは例で使用されているidではあまり意味がないため、jQueryとjQueryテンプレートを含む別の例を次に示します。
http://jsfiddle.net/amamaenko/dW7Wh/5/
それがない行の末尾のスペースに注意してください<input value="${x} "/>。この例はIEでは機能しません。
jqueryで試しましたか？
alert($('#div1').html());