ベストアンサー

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

2009/12/08 10:21

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">  </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">  </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>

zenigame99
お礼率100% (11/11)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

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

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2009/12/15 10:22 回答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">  </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">  </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>

質問者

お礼 2010/01/08 16:17

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

その他の回答 (2)

steel_gray
ベストアンサー率66% (1052/1578)

2009/12/08 17:55 回答No.2

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

質問者

お礼 2009/12/10 16:34

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

yyr446
ベストアンサー率65% (870/1330)

2009/12/08 14:27 回答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); } } } }

質問者

お礼 2009/12/10 16:30

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

関連するQ&A

ハイライト表示が消えてしまう
フレームを使って、右側のリンクリスト（right.html）をクリックした際に、左側に表示されたHTMLの文言をハイライト表示させたいと思っていますある程度は出来てきたのですが、一瞬ハイライトしてすぐに消えてしまうのです・・・どなたかお助けして頂けませんでしょうか宜しくお願い致します～index.html～ <head> <meta content="text/html; charset=Shift-JIS" http-equiv="content-type"> <title>ハイライト表示</title> </head> <frameset cols="1031,*" frameborder="no" border="0" framespcing="0"> <frame src="#" scrolling="yes" id="left" name="left"> <frame src="right.html" scrolling="yes" id="right" name="right" noresize="noresize"> </frameset> <body> </body> </html> ～right.html～ <head> <meta content="text/html; charset=Shift-JIS" http-equiv="content-type"> <script language="javascript">  </script> </head> <body> <ls><a href="#" onclick="change('建物','left_1.html')">left_1.html</a></ls> <ls><a href="#" onclick="change('建物','left_2.html')">left_2.html</a></ls> <ls><a href="#" onclick="change('建物','left_3.html')">left_3.html</a></ls> </body> </html> ちなみにleft_1.html等のリンク先のHTMLは修正する事が出来ません何卒宜しくお願い致します
- ベストアンサー
- JavaScript
ハイライト表示をしたい
2度目の投稿（前回の投稿 http://oshiete1.goo.ne.jp/qa5506744.html）になりますが、指定の文言を色を変えて目立つように（以下ハイライト表示）させたいと思っています最初に作った物はタグの中（altの中）まで置換をしてしまい、HTMLがくずれるという始末・・・そこでこのサイトで質問した所、以下のスクリプトを教えて頂きましたところがfirefoxだと動くのですが、IE（IE６しか入っていない環境で使いたい）では動きません色々調べたところ「フレーム越しの要素コピーは，FFではできて，IEではできないらしい」というのが原因じゃないかという所まで辿り着きましたまだjavascript初心者で勉強中な為、教えて頂いたスクリプトも全部理解している訳ではありませんが、どなたか解決方法を教えて頂けないでしょうか何卒宜しくお願い致します以下教えて頂いたスクリプト  </script>
- ベストアンサー
- JavaScript
表示されない
すみません初心者です。キーボードから入力された文字、およびその実行した時刻にもとづいて　「おはようございます○○さん」（5時から10時まで）「こんにちは○○さん」（10時から18時まで）「こんばんは○○さん」（18時から5時まで）と表示したいのですが以下のプログラム作成したところ表示されませんでした。どこかおかしいとこがあれば教えてください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/html1-tarnsitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ご挨拶</title> </head> <body> <script type="text/javascript"> //<![CDATA[ function generateGreeting(aisatsu) { var kutouten = "!"; function returnGreeting(aite) { return aisatsu + "," + aite + kutouten; } return returnGreeting; } var str; str=prompt("お名前は？",""); var today = new Date(); var todayHour = today.getHours(); if(todayHour >= 5 && todayHour < 10){ document.write("おはようございます"+str+"さん"); }else if(todayHour >= 10 && todayHour < 18){ document.write("こんにちは"+str+"さん"); }else if(todayHour >= 18 && todayHour < 5){ document.write("こんばんは"+str+"さん"); } //]]> </script> </body> </html>
- 締切済み
- JavaScript
javascriptで質問
javascript初心者です。日付で自動的に変わるようなメニューが作りたいのですがもっとシンプルに簡潔にできますか？また、開いているページのタブの色を他と変えたいのですができますか？以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript">  </script> </head> <body> <ul class="menu"> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </ul> </body> </html>
- 締切済み
- JavaScript
location.hrefを使用したFRAME表示
location.hrefを使ったjavascriptを作ろうとしています。 <script type="text/javascript"></script> の改良版として、http://www.yahoo.co.jp/をフレームの右側に表示させたいと考えています。（src使用ではなくjavascriptのlocation.hrefを使うことがMUSTです) <head> <script type="text/javascript"></script> </head> <body> <FRAMESET cols="50%,50%"> <FRAME name="left" src="left.html"> <FRAME name="right" src="right.html"> </FRAMESET> </body> としてみましたがうまくいきません。 location.hrefはmetaタグ内でしか有効ではないにも関わらず right.の指示をメタタグ内部で指定していないことが原因かもしれません。 javascriptのlocation.hrefを使ってフレームの右側に表示させる方法をご教授願います。
- ベストアンサー
- JavaScript
以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooト
以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooトップへリンクするjavascriptです。はじめて作ったタグなので無駄なところを教えてくださいまた、同じウィンドウで開くにはどこをいじったらよいですか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <script type="text/javascript"> function change(){ document.getElementById("pic").src="2.jpg"; window.open("http://www.goo.ne.jp/");} </script></head> <body> <a href="javascript:change();"><img id="pic" src="1.jpg" alt="gooへリンク"></a> </body></html>
- ベストアンサー
- JavaScript
サブメニュー表示方法
以下のサイトのようなナビゲーションを作っています。 http://www.skuare.net/test/jHsubnav.html マウスオーバーでサブメニューが出るのではなく最初からHOMEのサブメニューを表示しておくには、どのようにしたらよいでしょうか。初心者で、わからず困っています。よろしくお願い致します。 ------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> ul#topnav { margin: 0; padding: 0; list-style: none; position: relative; font-size: 1.2em; background: #000; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; } ul#topnav li a { padding: 10px 15px; display: block; color: #000; text-decoration: none; } ul#topnav li:hover { background: #1376c9; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; background: #1376c9; color: #fff; } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script type="text/javascript" src="http://alphasis.info/library/javascript/jquery/jquery-1.4.2.js"></script> <title>無題ドキュメント</title> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("ul#topnav li").hover(function() { //メインメニュー（#topnavi li）にマウスが乗った時 $(this).css({ 'background' : '#1376c9'}); //その要素の背景色を変える $(this).find("span").show(); //サブメニューを表示 } , function() { $(this).css({ 'background' : 'none'}); //背景色を戻す $(this).find("span").hide(); //サブメニュー隠す }); }); </script> <ul id="topnav"> <li><a href="#">Home</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
インラインフレーム、ｃｓｓの質問です。
下記の3カラムのページを練習で作っているのですが、右端のサイドバーをインラインフレームで表示させようとしたところレイアウトが崩れてしまいます。そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが色々調べてはみたのですが直せなくて困っています。どなたかお分かりになる方ご回答お願いします。 HTML,CSS,インラインフレームのHTMLの順で貼っています。 HTMLソース------------------------------ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title></title> <link rel="stylesheet" href="C:/Documents and Settings/abc/デスクトップ/gear crafter/test2.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <a href=><img src="http://gearcrafter.web.fc2.com/image/testtop2.jpg" alt="" id="top" /></a></div> <div id="headermenue"> <ul class="topmenue"><a href=><li>cart</li></a><li><a href=>about us</a></li><li><a href=>Q & A</a></li> </ul> </div> <div id="side"> カテゴリ <ul type="square" compact="compact" class="sidecate"> <li><a href=>財布</a></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li> </ul> </div> <div id="main"><a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a></div> <div id="side2">sgad<iframe src="side2.html" width="80" scrolling="no" frameborder="0"></iframe> </div> <div id="footer"></div> </div> </body> </html> --------------------------------------------------------------- --CSS--------------------------------------------------------- @charset "shift-jis"; /*画像*/ img { border-style:none; } a img { border-style:none; } a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter: "alpha( opacity=80 )";} /*リンク*/ a:link{ text-decoration:none; color:#34494e;} a:visited{ color:#34494e;} a:hover{color:#245ba6;} a:active{color:#245ba6;} a { text-decoration: none; } /*レイアウト*/ ul.topmenue { margin-right:0px; margin-left:auto; width:29em; } ul.topmenue li { float: right; width: 8em; margin-left: 5px; padding: 2px; border: 1px #b3bc6f solid; background-color: #b3bc6f; text-align: center; } ul.sidecate { width: 2em; margin-left: 1px; margin-top: 0px; padding: 1px; border: 1px #b3bc6f solid; background-color: #d8ddb6; text-align: center; width:194px;} ul.sidecate li {text-align: left; width:194px; } #container { width : 980px; margin-left: auto; margin-right: auto; background-color :#222222;} } #header {width :960px; } #headermenue {width : 960px;} #side { float: left; margin-left: 5px; padding-top: 5px; width: 200px; background-color: #b3bc6f; text-align:center;} #main {margin: 0px 110px 0px 220px; width: 630px;} #side2 {background-color: #b3bc6f; float: right; width: 80px; margin-right: 5px;} #footer {clear: both; width: 960px; } --------------------------------------------------------------- --インラインフレーム---------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <?xml version="1.0" encoding="shift_jis"?> <style type="text/css">  </style> <html> <head> </head> <body> test text </body></html>
- ベストアンサー
- CSS
floatタグの使い方
FOM出版　WEBクリエイター検定　初級のテキスト問題で分からないことがあります。詳しいかたお力をおかしください。 htmlファイルの記述ーーー（少し簡略化してます） <!DOCUTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"> <p>古代の七不思議</p> </div> <div class="right"> <p>古代の七不思議</p> </div> </body> </html> CSSの記述ーーー .left{color:#000000; background-color:#cccc99; padding:10px; margin-left:10px; width:300px; float:left; } .right{color:#000000; background-color:#cccc99; padding:10px; margin-left:350px; width:300px; } これが正解のようで、クラスleftの右にクラスrightが回り込みます。しかし僕にはクラスrightに記述したmargin-left:350px;がよく分かりません。 divタグでボックスを二つ創ってあるので、.leftにfloat:left;の記述をして .rightが回り込んで.rightにmargin-left:10px;記述とかで隙間が開くのだと思っていました。ちなみに.rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。これもよくわかりません。つたない文章で分かりづらいかもしれませんが、どうか解説をお願いいたします。よろしくお願いします。
- ベストアンサー
- HTML
マウスオーバーでフレームに対応した内容を表示・・・。
こんにちは。いつもお世話になっております。参考にしたサイト http://www.openspc2.org/reibun/javascript/frame/003/index.html 【内容】フレーム分割のページ等の内容は以下の通りです。 ●フレーム分割ページ <html> <head> <title>マウスオーバーで右側フレームに対応した内容を表示する</title> <frameset cols="20%,*"> <frame src="code_left.html"> <frame src="code_right.html" name="rightFrame"> </frameset> </head> </html> ●左側のページ(code_left.html) <html> <head> <title>マウスオーバーで右側フレームに対応した内容を表示する</title> <script language="JavaScript"></script> </head> <body> <a href="#" onMouseover="setFrame('page1.html')">その１</a><br> <a href="#" onMouseover="setFrame('page2.html')">その２</a><br> </body> </html> で、意図した動きが出来たのですが、その１をクリックするとcode_left.htmlが別窓で開いてしまいます。参考にしたサイトのサンプル画面ではこのような動きにはならないのに、なぜ別窓が開いてしまうのかがわからないのです。どうかご指導よろしくお願いいたします。
- ベストアンサー
- JavaScript

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