ページ内検索を自ページに設置
= ヒットしたテキストをハイライト表示 =

《言語目次》
 Japanese [日本語]  
 English [英語]  
 Korean [韓国語]  
 Simplified Chinese [简体中文]  
 Traditional Chinese [繁體中文]  
 Español [スペイン語]  
 Français [フランス語]  
 Português [ポルトガル語]  
 Deutsch [ドイツ語]  
 Italiano [イタリア語]  
 Russian [ロシア語]  
 Turkish [トルコ語]  
 Hindi [ヒンディー語]  
 Vietnamese [ベトナム語]  
 Thai [タイ語]  
 Dutch [オランダ語]  
 Indonesian [インドネシア語]  
 Malay [マレー語]  
 Filipino [フィリピン語]  
 Swedish [スウェーデン語]  
 Norwegian [ノルウェー語]  
 Danish [デンマーク語]  
 Finnish [フィンランド語]  
 Polish [ポーランド語]  
 Czech [チェコ語]  
 Hungarian [ハンガリー語]  
 Greek [ギリシャ語]  
 Romanian [ルーマニア語]  
 Tagalog [タガログ語]  
 Ukrainian [ウクライナ語]  
 Arabic [アラビア語]  
  • キーボードの「Ctrl + F」「⌘ command + F」を使った検索では、ページ内の広告なども含め全てのテキストが検索の対象となりますが、このプログラムでは「<div id="content_to_search"></div>」で指定した範囲だけを検索の対象とすることができます。
  • 検索ワードの入力が確定すると、ヒットしたテキストがハイライト表示され、その位置へスクロールします。
  • 「Enter」キーのみで検索することができるので、「検索ボタン」を設置する必要ありません。
  • 検索結果が複数ある場合、「Enter」キーを使って連続して移動させることができます。
  • 下記の「CSS」「JavaScript」「HTML」をコピーして、ご自身のページに設置してください。
  • コードは、ページデザインなどに合わせて適宜変更してください。
  • 複数スクロールなどの機能を加え、大幅改訂。(2024/07/17)
  • 特殊文字を正しく認識できるるように「正規表現のエスケープ」の補強、「A」と「a」などの「大文字小文字の区別機能」の追加、「検索語変更後の自動リセット機能」の追加など。(2024/08/22)
《このコードを使用したページの例》
 《戦時下標語・国策標語》  
《ページ内検索 Demo & 必要なコード》
  • コードをコピー、またはダウンロードして利用することができます。
  • ご利用にあたっての制限はありません。適宜、ご自身のページに合わせてご利用ください。

おすすめサイト・関連サイト…

Last updated : 2024/09/10