ハイライト表示をしたい

質問

2度目の投稿（前回の投稿 http://oshiete1.goo.ne.jp/qa5506744.html）になりますが、指定の文言を色を変えて目立つように（以下ハイライト表示）させたいと思っています

最初に作った物はタグの中（altの中）まで置換をしてしまい、HTMLがくずれるという始末・・・

そこでこのサイトで質問した所、以下のスクリプトを教えて頂きました

ところがfirefoxだと動くのですが、IE（IE６しか入っていない環境で使いたい）では動きません

色々調べたところ「フレーム越しの要素コピーは，FFではできて，IEではできないらしい」というのが原因じゃないかという所まで辿り着きました

まだjavascript初心者で勉強中な為、教えて頂いたスクリプトも全部理解している訳ではありませんが、どなたか解決方法を教えて頂けないでしょうか

何卒宜しくお願い致します

以下教えて頂いたスクリプト

<!--
var str;
function left_load(){
if(str){
search(left.document.getElementsByTagName("body"));
}
}
function search(elm){
for(var i=elm.length-1;i>=0;i--){
if(elm[i].nodeName=="#text"){
var re=new RegExp(str,"g");
var ss=elm[i].nodeValue;
var result = elm[i].nodeValue.indexOf(str);
if(result>=0){
var result_str=ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>");
var newElement = document.createElement("span");
newElement.innerHTML = result_str;
elm[i].parentNode.replaceChild(newElement,elm[i]);
}
}else{
if(elm[i].hasChildNodes()){
search(elm[i].childNodes);
}
}
}
}
// -->
</script>

回答No.1

fujillin · ベストアンサー

ご提示のスクリプトがどこにあるのか不明ですが、多分、<frameset>のあるファイルにあるのかと想像します。
なぜそこにあって、グローバル変数(str）をどのように使っているのかよくわからないけど…

＞フレーム越しの要素コピーは，FFではできて，IEではできないらしい
↑というようなことはないでしょう。
documentは取得できているようですし。
どうやら、IEではテキストノードに対して、replaceChildとかinsertBeforeなどの操作が効かないみたい。（removeChildはできるみたいですけど。）

とりあえず思いつくのは、search内では一度テキスト（目印になる文字列）に置き換えておいて、最後にまとめてinnerHTMLで置き換えるという2段階にすれば可能ではないのでしょうか。
↓の例では一時置き換え用に「_ + ESC + DEL + _」の文字列を使っていますが、実際に利用するhtmlに出てこない文字列にしておくのがよろしいかと…
（leftはフレームのname属性と仮定しました）

function left_load(a){
if(str){
var e, str_tmp = '_\x1b\x7f_';
var str_rep = '<span style="background:#77ff77;font-weight:bold">' + str + '</span>';

e = frames['left'].document.getElementsByTagName("body");
search(e, str_tmp);
e[0].innerHTML = e[0].innerHTML.replace(new RegExp(str_tmp,"g"), str_rep);
}
}

function search(elm, s) {
var i, e;
for (i=elm.length-1; i>=0; i--) {
e = elm[i];
if(e.nodeName=="#text") {
e.nodeValue = e.nodeValue.replace(new RegExp(str,"g"), s);
} else {
if (e.hasChildNodes()) search(e.childNodes, s);
}
}
}

お礼

ありがとうございました！

出来ました～！（＞＜

「IEではテキストノードに対して、replaceChildとかinsertBeforeなどの操作が効かない」←これが原因なのですね・・・

ブラウザによって動いたり動かなかったりと、javascriptって難しいですね

教えて頂いたスクリプトをきちんと理解出来るように勉強します

本当にありがとうございました