iPhone用ページ内検索ブックマークレット

iPhoneを使っていて、ふとページ内検索をしようと思ったところ、そういえばiPhoneにはページ内検索機能がなかったことに気づきました。

調べてみると、ブックマークを公開してくださっている方のページを発見。
iPhone ページ内検索ブックマークレット

早速、使わせていただきました。ありがとうございます。

せっかくjsを勉強中なのでソースを見てみようと思います。

javascript:
var t=window.prompt('検索する文字列を入力して下さい。','');
if(t!=null&&t!=''){
 var re=new RegExp(t,'ig');
 var b=document.body.innerHTML;
 b=b.replace(re,'<span id=\'sebml\' name=\'sebml\' style=\'color:#000;background-color:#FF0;\'>'+t+'</span>');
 document.body.innerHTML=b;
 var sebml=document.getElementsByName('sebml');
 if(sebml.length==0){
  alert('一致する文字列はありません。');
 }
 else{
  alert(sebml.length+'件検索しました。');
 }
}
void(0);

入力文字列に該当する文字列を、正規表現でspanタグ付きに置き換えているのですね。
その後、置き換わったタグの要素を取得して該当結果を表示。

検索結果表示後、検索結果の先頭要素まで移動するように少し改良
（location.hashを追加しただけです）

javascript:
location.hash=null;
var t=window.prompt('検索する文字列を入力して下さい。','');
if(t!=null&&t!=''){
 var re=new RegExp(t,'ig');
 var b=document.body.innerHTML;
 b=b.replace(re,'<span id=\'sebml\' name=\'sebml\' style=\'color:#000;background-color:#FF0;\'>'+t+'</span>');
 document.body.innerHTML=b;
 var sebml=document.getElementsByName('sebml');
 if(sebml.length==0){
  alert('一致する文字列はありません。');
 }
 else{
  alert(sebml.length+'件検索しました。');
  location.hash='sebml';
 }
}
void(0);

ただ、この方法だと同じidを持つ要素が複数存在してしまうので別の方法を使う方がよいと思うのですが、上手いやり方が分からなかったのでとりあえずこのまま載せておきます。

PCのブラウザみたいに「次を検索」ボタンをつけたいなー。

まだまだjsの勉強不足です。

メモ：
変数の値を正規表現に用いる場合はRegExpを使う
RegExpのオプションの意味は

i　大文字・小文字を区別しない
g　2番目、3番目... にマッチする部分も検索する

正規表現の勉強も進めないと。

参考：
正規表現（RegExp）