JavaScriptによるページ内検索での検索方向

解決済

質問者：seven9317
質問日時：2010/01/14 21:06
回答数：2件

こんにちは、JavaScriptを使ったページ内検索についての質問です。

http://computer.shipweb.jp/soft/pageinserch.htm
こちらのサイト様を参考に、自分のサイトにページ内検索をつけ正常に作動はしましたが、
検索方向が「上から下」の一方のみになっています。
これを「下から上」方向へも検索出来ないかと考えているのですが、
JavaScriptに関してほぼ無知に近い為何をどう変えれば良いのかわからず困り果てております；

検索方向の記述がどこの部分なのか、出来ればどう変えれば良いのかも、
分かる方がいらっしゃいましたらご教授お願い致します。

通報する

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

質問の本文を隠す

回答 (2件)

No.2ベストアンサー

回答者： my--
回答日時：2010/01/16 13:26

だめでしたか。

２方向の件は最初の質問内容をいい加減に読んだこちらのミスです。
申し訳ありません。

承知の上で使ってると思いますけど、要素名や属性まで検索の対象になるのは使い勝手が悪そう。
ブラウザが備える機能を補うものでないと意味はないかなと個人的には思います。

一応検証に使ったソースコードを置いておきますが、これもいい加減です。あくまで参考程度にして下さい。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
var serchindex = -1;//ココ
var serchcounter = 0;
var serchstr = "";
var serchwordcounter = 0;
var start = 0;
var dir = "";
function wordserch() {
var radio = document.parts.radio1;
for (var n = 0; n < radio.length; n++) {
if (document.parts.radio1[n].checked) {
if (dir != document.parts.radio1[n].value) {
dir = document.parts.radio1[n].value;
serchindex = (dir == "down") ? 0 : -1;
}
break;
}
}
var s = document.parts.text1.value;
if (s != serchstr) {
serchindex = (dir == "down") ? 0 : -1;//ココ
serchstr = s;
serchwordcounter = 0;
}
var bCrumb = new Array();
var i;
while (serchstr.indexOf('　') >= 0) {
serchstr = serchstr.replace("　", " ");
}
while (serchstr.indexOf('|') >= 0) {
serchstr = serchstr.replace("|", " ");
}
while (serchstr.indexOf('&') >= 0) {
serchstr = serchstr.replace("&", " ");
}
bCrumb = serchstr.split(" ");
for (i = serchwordcounter; i < bCrumb.length; i++) {
serchstring = bCrumb[i];
serchcounter++;
ref = serch(serchstring);
if (!ref) {
alert('検索単語が見つかりません');
}
if (ref == true && start >= 0) {
break;
} else if (ref == true && start < 0) {
serchwordcounter++;
serchindex = (dir == "down") ? 0 : -1;//ココ
break;
} else {
serchwordcounter++;
serchindex = (dir == "down") ? 0 : -1;//ココ
}
}
}
function serch(txt, index) {
var before, after, objstr;
kazu = 0;
serchstr = txt;
objct = document.getElementById('UR');
str = objct.innerHTML;
if (serchindex < 0) serchindex = str.length;//ココ
if (dir == "down") {
start = str.indexOf(serchstr,serchindex);//ココ
} else {
start = str.lastIndexOf(serchstr, serchindex);
}
if (start > 0) {
before = str.substring(0, start);
txt = "<B><A NAME='serchstr" + serchcounter + "'>" + serchstr + "</A></B>";
after = str.substring(start + serchstr.length);
objstr = before + txt + after;
objct.innerHTML = objstr;
location.hash = "#serchstr" + serchcounter;
serchindex = (dir == "down") ? start + txt.length : start;//ココ
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<form name="parts" action="#">
<div><input type="text" name="text1">
<input type="button" onclick="wordserch()" value="検索">
<input type="radio" name="radio1" value="down" checked>down
<input type="radio" name="radio1" value="up">up
</div>
</form>
<div id="UR">～</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

再度のご回答とご確認ありがとうございます。
貼って頂いたソースできちんと動作しました！

要素名や属性の件ですが、
自サイトがアイテムデータサイトとなっておりまして、
検索対象が全て日本語（ひらがな・カタカナ・漢字、稀に数字）ですので
そこらへんは大丈夫かなと思います。

ご教授頂き本当にありがとうございました。

通報する

お礼日時：2010/01/17 02:38

No.1

回答者： my--
回答日時：2010/01/14 22:46

str = objct.innerHTML;

if (serchindex < 0) serchindex = str.length;//ココ
start = str.lastIndexOf(serchstr, serchindex);//ココ
if (start > 0) {

まずココを。それから先頭行の

var serchindex = -1;//ココ

あといくつか serchindex = 0 がありますけど
そこもすべて-1を代入します。最後に

serchindex = start;//ココ

最終行近くにあるココを書き換えてみて下さい。
一応動きましたけど、動作確認は十二分に。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！
さっそく試してみましたが、上手く動作しませんでした・・・
どこか解釈を間違えてしまっているのでしょうか；

str = objct.innerHTML;
if (serchindex < 0) serchindex = str.length;//←この一文を付けたし
start = str.lastIndexOf(serchstr, serchindex);//←lastを付けたし
if (start > 0) {
全ての「serchindex = 0」の0を-1に変える。
最後付近「serchindex=start+txt.length;」を→「serchindex = start;」に変える。

で合ってますでしょうか？
お手数ですが確認して頂けますと幸いです；
自分の方でも、ご回答を参考に引き続き頑張ってみます。

それと質問内容の補足ですが、
イメージしているのは、質問内容に貼ったサイト様のフレーム版＋
http://usagi-js.com/sample/jssample9_2.htm
こちらのサイト様のように上からと下からの２方向で切り替えて検索が出来る機能です。
説明不足で申し訳ありません；