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>
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>
ありがとうございます
お礼のコメントを外出先からモバイルカードを使いつけたはずが、操作魅しをしたのか投稿されてなかったようです
申し訳ありません
firefoxでは動作確認を取れたのですが、IE6では「引数が無効」とエラーメッセージが出てしまいます
詳細に書くと以下です
ライン:26
文字:1
エラー:引数が無効です
コード:0
URL:~index.html(フレームのHTMLです)
結果返信が遅れてしまった事、本当に申し訳ありませんでした
No.2
- 回答日時:
書き込みありがとうございます
下のコメントにも書いたのですが、解析している時間が必要でしたので返事が遅れました
申し訳ありません
上記サンプルで実験したところ、見事にaltの中を飛ばして置換してくれます
で・・・これも下に書いたのですが、フレームの左側を置換するやり方が分かりません・・・
ちなみに左側のHTMLは一切いじる事が出来ない事を前提にしてます
まだjavascriptを勉強しはじめたばかりの初心者なので、もう少し色々勉強してみます
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);
}
}
}
}
書き込みありがとうございました
返事が遅れまして申し訳ありません
実はjavascript初心者でして、単純に「分かりません」では失礼過ぎると思ったので、教えて頂いたスクリプトを色々解析しておりました
結論から言いますと、まだ上手く出来ません
ノード毎に検索をしてリプレスするのは分かったのですが、フレームの左側をリプレスが上手くいかないようです(それすら怪しいのですが・・・)
まず「search(document.getElementsByTagName("body"));」ここの部分なのですが、これはleft.document~とすれば宜しいのでしょうか?
あとリプレスの所もleft.~と何処かで指定するのでしょうか?
見当違いな事を言っていたらすみません
もう少し勉強してみます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マウスクリックした地点のテキ...
-
リンク移動先のURLを取得
-
getElementsByNameで要素が取得...
-
SSIをJavascriptの変数に割り当...
-
return falseが効かない(F5キ...
-
時間帯○時○分で表示切替
-
【js】onsubmit属性が変更できない
-
XMLHTTPRequestでstatusが0に
-
指定したセルにrowspan属性を適...
-
ボタンをクリックしたらページ...
-
一部のテキストだけのKEYCODEを...
-
JavaScript でキーを送る
-
idHOGEで取得したinnerText(数...
-
Javascriptの出力結果をhtmlボ...
-
関数内でonclickをさせたい
-
Google Maps APIについて質問です
-
Backbone.js イベントが効かない
-
SCRIPT5007: 未定義または NULL...
-
function の return 値を表示し...
-
フォーカス移動抑止について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
getElementsByNameで要素が取得...
-
JavaScriptでiframeの内容を「...
-
function の return 値を表示し...
-
SCRIPT5007: 未定義または NULL...
-
ボタンのID名を取得するには?
-
JavaScript でキーを送る
-
フォーカス移動抑止について
-
乱数を一定時間毎に表示させた...
-
bodyタグのfocus
-
ボタンを押してテキストエリア...
-
JavaScriptでのEnterキーとAlt+...
-
自動ジャンプでフォームデータ...
-
リンク移動先のURLを取得
-
一定時間画像を表示させ、その...
-
idHOGEで取得したinnerText(数...
-
「オブジェクトを指定してくだ...
-
キーを押している間の時間を計...
-
html javascript 作った配列を...
-
チェックボックスの選択パター...
-
Operaでのobjectタブの高さ変更
おすすめ情報