IEの JavaScriptで リンクの hrefを変えると表示内容が変わる問題

IE6/7のJavaScriptでリンクをいじった時のバグとその対策について。


問題が起きる条件

• ブラウザはIE6 or IE7
• 該当のリンクの文字列に、@（アットマーク）が含まれている

上記の条件を満たす場合、JavaScriptを使ってリンク（a要素）のhref属性を変更すると、なぜかリンクとして表示しているテキスト等がURLになってしまう。

このようなリンクを、
<a id="link" href="before.html">foo@bar</a>

このようなJavaScriptでhrefを変更すると、
var link = document.getElementById("link");
link.href = link.href.replace("before", "after"); //右辺にhref属性が入っていると駄目らしい

このようなリンクになるはず（じっさいFirefoxではこうなる）が、
<a id="link" href="after.html">foo@bar</a>

こうなってしまう。
<a id="link" href="after.html">after.html</a>

対策としては、innerHTMLでリンクのテキスト等を退避しておき、href属性変更後に退避した値をセットする。

var inner = link.innerHTML;
link.href = link.href.replace("before", "after");
link.innerHTML = inner;

参考： アカラボ: javascript: link.href を変更するとリンクテキストが壊れます