• ベストアンサー

ハイライト表示（タグの中を除きたい）

HTMLの特定文言をハイライト表示をする為に下記のような感じでjavascriptを組んだのですが、altの中身までreplaceしてしまい、altの中に文言があるとHTMLの形が崩れて画像も表示されなくなってしまいます これをなんとかしたいのですが、タグの中を置換しない方法はありますでしょうか もしくは下記の方法でなく「これならタグの中身を抜かしてハイライト出来る」という物はありませんでしょうか 何卒宜しくお願い致します ～現在の方法は以下～ 親（～index.html～） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "​http://www.w3.org/TR/html4/frameset.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml"​ lang="ja-JP"> <head> <title>ハイライト表示</title> <script type="text/javascript" charset="utf-8"> <!-- var str; function left_load(){ if(str){ var re=new RegExp(str,"g"); var b=left.document.body; var ss=b.innerHTML; b.innerHTML= ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); } } // --> </script> </head> <frameset cols="1031,*" frameborder="no" border="0" framespcing="0"> <frame src="about:blank" onload="left_load();" scrolling="yes" id="left" name="left"> <frame src="right.html" scrolling="yes" id="right" name="right" noresize="noresize"> </frameset> </html> ～right.html～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "​http://www.w3.org/TR/html4/frameset.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml"​ lang="ja-JP"> <head> <title>ハイライト表示選択</title> <script type="text/javascript" charset="utf-8"> <!-- function change(str,url){ parent.str = str; parent.left.location.href=url; } // --> </script> </head> <body> <ol> <li><a href="#" onclick="change('建物','left_1.html')">left_1.html</a></li> <li><a href="#" onclick="change('建物','left_2.html')">left_2.html</a></li> <li><a href="#" onclick="change('建物','left_3.html')">left_3.html</a></li> </ol> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

No.1です。一応できるようにしてみたのですが、 あらゆる場合をテストしていません。 一例として、 フレームセットのHTML＝＝＝＝＝＝＝＝＝ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ハイライト表示</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- 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> </head> <frameset cols="500,*" frameborder="no" border="0" framespcing="0"> <frame src="about:blank" onload="left_load();" scrolling="yes" id="left" name="left"> <frame src="frameset31.htm" scrolling="yes" id="right" name="right" noresize="noresize"> </frameset> </html> 右フレームのHTML（frameset31.htm）＝＝＝＝＝＝＝＝＝ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>右フレーム</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- function change(str,url){ parent.str = str; parent.left.location.href=url; } // --> </script> </head> <body> <ol> <li><a href="about:blank" onclick="change('建物','frameset32.htm');return false;">frameset32.htm</a></li> </ol> </body> </html> 左フレームのHTML（frameset32.htm）＝＝＝＝＝＝＝＝＝ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ハイライト表示されるHTML</title> <body> ああああ<br> いいいい<br> ええええ建物うううう<br> abcdef建物hijk<br> 建物建物建物建物<br> mmm<br> </body> </html>

zenigame99
質問者

お礼

ありがとうございます お礼のコメントを外出先からモバイルカードを使いつけたはずが、操作魅しをしたのか投稿されてなかったようです 申し訳ありません firefoxでは動作確認を取れたのですが、IE６では「引数が無効」とエラーメッセージが出てしまいます 詳細に書くと以下です ライン：26 文字：1 エラー：引数が無効です コード：0 URL：～index.html（フレームのHTMLです） 結果返信が遅れてしまった事、本当に申し訳ありませんでした

すると、全ての回答が全文表示されます。

その他の回答 (2)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

そのもの、ではないようですが、 使えそうなサンプルがあったので紹介しておきます。 http://c-man.s21.xrea.com/mars/md20080315.html

zenigame99
質問者

お礼

書き込みありがとうございます 下のコメントにも書いたのですが、解析している時間が必要でしたので返事が遅れました 申し訳ありません 上記サンプルで実験したところ、見事にaltの中を飛ばして置換してくれます で・・・これも下に書いたのですが、フレームの左側を置換するやり方が分かりません・・・ ちなみに左側のHTMLは一切いじる事が出来ない事を前提にしてます まだjavascriptを勉強しはじめたばかりの初心者なので、もう少し色々勉強してみます

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

再帰的に全部のテキストノードの中身のみを、検索対象にして 置換してみてはどうでしょう function left_load(){ search(document.getElementsByTagName("body")); } function search(elm){ for(var i=0;i<elm.length;i++){ if(elm[i].nodeName=="#text"){ // alert(elm[i].nodeValue); var re=new RegExp(str,"g"); var ss=elm[i].nodeValue; elm[i].nodeValue=ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); }else{ if(elm[i].hasChildNodes()){ search(elm[i].childNodes); } } } }

zenigame99
質問者

お礼

書き込みありがとうございました 返事が遅れまして申し訳ありません 実はjavascript初心者でして、単純に「分かりません」では失礼過ぎると思ったので、教えて頂いたスクリプトを色々解析しておりました 結論から言いますと、まだ上手く出来ません ノード毎に検索をしてリプレスするのは分かったのですが、フレームの左側をリプレスが上手くいかないようです（それすら怪しいのですが・・・） まず「search(document.getElementsByTagName("body"));」ここの部分なのですが、これはleft.document～とすれば宜しいのでしょうか？ あとリプレスの所もleft.～と何処かで指定するのでしょうか？ 見当違いな事を言っていたらすみません もう少し勉強してみます

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する