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

解決済

質問者：zenigame99
質問日時：2009/12/08 10:21
回答数：3件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yyr446
回答日時：2009/12/15 10:22

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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます

お礼のコメントを外出先からモバイルカードを使いつけたはずが、操作魅しをしたのか投稿されてなかったようです

申し訳ありません

firefoxでは動作確認を取れたのですが、IE６では「引数が無効」とエラーメッセージが出てしまいます

詳細に書くと以下です

ライン：26
文字：1
エラー：引数が無効です
コード：0
URL：～index.html（フレームのHTMLです）

結果返信が遅れてしまった事、本当に申し訳ありませんでした

通報する

お礼日時：2010/01/08 16:17

No.2

回答者： steel_gray
回答日時：2009/12/08 17:55

そのもの、ではないようですが、

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

- 0
- 件

通報する

この回答へのお礼

書き込みありがとうございます

下のコメントにも書いたのですが、解析している時間が必要でしたので返事が遅れました

申し訳ありません

上記サンプルで実験したところ、見事にaltの中を飛ばして置換してくれます

で・・・これも下に書いたのですが、フレームの左側を置換するやり方が分かりません・・・

ちなみに左側のHTMLは一切いじる事が出来ない事を前提にしてます

まだjavascriptを勉強しはじめたばかりの初心者なので、もう少し色々勉強してみます

通報する

お礼日時：2009/12/10 16:34

No.1

回答者： yyr446
回答日時：2009/12/08 14:27

再帰的に全部のテキストノードの中身のみを、検索対象にして

置換してみてはどうでしょう
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);
}
}
}
}

- 0
- 件

通報する

この回答へのお礼

書き込みありがとうございました

返事が遅れまして申し訳ありません

実はjavascript初心者でして、単純に「分かりません」では失礼過ぎると思ったので、教えて頂いたスクリプトを色々解析しておりました

結論から言いますと、まだ上手く出来ません

ノード毎に検索をしてリプレスするのは分かったのですが、フレームの左側をリプレスが上手くいかないようです（それすら怪しいのですが・・・）

まず「search(document.getElementsByTagName("body"));」ここの部分なのですが、これはleft.document～とすれば宜しいのでしょうか？

あとリプレスの所もleft.～と何処かで指定するのでしょうか？

見当違いな事を言っていたらすみません

もう少し勉強してみます