人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

記事内の検索機能

PCでWEBをみているときみなさん
ctrl + F
でよく単語を検索して該当のところまでいきますよね。

【ここからが質問】
アイフォン・andoroidで記事を開いて、
その探している単語のところまでユーザーが”パッ”といけるような
機能を実装したいです。

*サイト内検索フォームはNGです。
→あくまでも同一ページ内に”パッ”と限ります。
→内部リンクもNGで。私の設置する時間がかかるため。

【最後に】
ユーザーがもとめているところまで行ける機能の実装を目指しています。
環境はワードプレスです。
プラグインでなくても、
どんな言語でもOKです。

恐れ入りますが、
アドバイスいたけると幸いでございます。

●質問者: ak
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● 井戸端さん
●50ポイント ベストアンサー

アイデアベースでいいかしら?

jQueryプラグインtapas.jsでハイライトすればclass="highlight"が付くの。
jQuery プラグインtapas.jsを使って、ページ内文字検索

jQueryでclass="highlight"の位置を調べてスクロール。
ページ内を自在にスクロール | よく使うjQuery
パッにしたいならanimateをやめてscrollTopとscrollLeftを指定すればいいわ。


7ccさんのコメント
これは結構修正しないと使えなさそうです。 試しに「\w」でハイライト表示をしてみるとページが盛大に壊れます。

akさんのコメント
tapas.jsなんてあるんですね!jquery coolですね? ありがとうございます!

2 ● a-kuma3
●50ポイント

面白そうなんで、javascript で組んでみました。

function moveToText(txt) {
 // 文字列を見つける
 var found = window.find(txt);

 // Range を取得
 var sel = getSelection();
 var rng = sel.getRangeAt(0);

 // 目印になる Node を作って Range の前に挿入
 var ele = document.createElement("span");
 rng.insertNode(ele);

 // 目印までスクロール
 ele.scrollIntoView();

 // 目印を削除
 ele.parentNode.removeChild(ele);

 // 選択状態を解除
 sel.collapse(document.body, 0);
}

はてなブログに、実際に動作するものを置いてあります。一応、Android の標準ブラウザでは動作しました。
http://a-kuma3.hatenablog.com/entry/2014/03/06/124657


window.find を使う利点は、ノードをまたがって検索してくれること。
先のはてなブログで「吾輩」を赤くしているのは意味があって、HTML は以下のようになってます。

<span style="color:red;">吾輩</span>

ここで、検索文字を「吾輩の主人」と検索してみてください。
単純に Node の中の文字列を拾うだけでは、こういうことができません。



最後に、参考にした MDN のページを乗せておきます。


7ccさんのコメント
実用するには少なくとも以下の対処が要ります。 - 検索位置の調整(window.findの検索開始位置は最後のキャレットの位置から) - input, textareaの文字を除外する処理(選択範囲が外れなくなる) - 入力が空の時にキャンセルする処理

akさんのコメント
詳しくありがとうございます!大変勉強になりました!

質問者から

みなさん大変ありがとうございました!
本当はみなさんにベストアンサーをつけたいのですが、
はやく解答をいただいた方にしました!


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ