質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16421questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ページ内検索で検索したワードをハイライト表示。なおかつ一番最初のハイライトへ自動でスクロールさせる

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 83

Riko

score 6

ページ内検索で複数単語を検索させて、ハイライト表示させるまではできました。
jquery.highlight-5.js を使用

サイト

ハイライト表示が複数あったとして、一番最初のハイライトの文字のところまで、
自動でスクロールするように設定したいのですが、どうすれば良いのかがわかりません。

テキストの前半に「あいうえお」後半に「さしすせそ」とテキストがあります。
「さしすせそ」を入力した時に「さしすせそ」の一番最初の位置まで自動的に移動させたい。

どうかご教授いただけないでしょうか?

どうぞよろしくお願いいたします。

<script>
        function doHighlight() {
            var word = $("#word").val()
                    .replace(/^\s+|\s+$/g, "")          //前後の空白を除去(gオプションは繰り返し)
        .replace(/\s+/g, " ")               //連続する空白を1つに
        .split(" ");
            for (i in word) {                    //要素数ぶんループ(iには添字が入る)
        if (word[i] != "") {               //空文字であれば処理しない
          $("#target").highlight(word[i]); //#target内のテキストに対し、処理中の語句でハイライト
        }
      }
        }
</script>

<script>
  $(function{
    $("#target").removeHighlight();
  });
</script>
/*

highlight v5

Highlights arbitrary terms.

<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

MIT license.

Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>

*/

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   pos -= (node.data.substr(0, pos).toUpperCase().length - node.data.substr(0, pos).length);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="search.css">
<title>無題ドキュメント</title>

<script>
        function doHighlight() {
            var word = $("#word").val()
                    .replace(/^\s+|\s+$/g, "")          //前後の空白を除去(gオプションは繰り返し)
        .replace(/\s+/g, " ")               //連続する空白を1つに
        .split(" ");
            for (i in word) {                    //要素数ぶんループ(iには添字が入る)
        if (word[i] != "") {               //空文字であれば処理しない
          $("#target").highlight(word[i]); //#target内のテキストに対し、処理中の語句でハイライト
        }
      }
        }
</script>

<script>
  $(function{
    $("#target").removeHighlight();
  });
</script>



</head>
<body>

<input type="text" id="word" /><input type="button" onclick="doHighlight()" value="入力された文字をハイライト" /><br />

<p>半角スペースで複数単語検索可能</p>

<p><a href="javascript:void($('#target').removeHighlight());">ここをクリックでハイライト消去</a></p>

<div id="target">
        テスト<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        あいうえおかきくけこ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
        さしすせそ<br />
    </div>
</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.highlight-5.js"></script>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

以下で、Firefox,Chrome,IE11 で動くとおもいますが

function doHighlight() {
   var word = $("#word").val()
    .replace(/^\s+|\s+$/g, "")          //前後の空白を除去(gオプションは繰り返し)
    .replace(/\s+/g, " ")               //連続する空白を1つに
    .split(" ");
   for (i in word) {                    //要素数ぶんループ(iには添字が入る)
      if (word[i] != "") {               //空文字であれば処理しない
         $("#target").highlight(word[i]); //#target内のテキストに対し、処理中の語句でハイライト
      }
   }
   /* Append Start */
   $elm = $(".highlight").first();
   if ($elm.length) {
      var pos = $elm.get(0).offsetTop;
      $('body,html').stop().animate({scrollTop:pos}, 500);   
   }
   /* Append End */
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/12 10:32

    本当にありがとうございます!!!
    無事にIEでも動作するようになりました!!!

    キャンセル

  • 2018/10/12 10:35

    回答して頂いたお二人にとても感謝しています!
    ですが、最初にアドバイスを頂きましたyeondev様にベストアンサーを付けさせて頂きますこと、どうぞお許しください。本当にありがとうございました。

    キャンセル

checkベストアンサー

0

HighlightというJSは初めて見るんですが、目標にしてるのはハイライト化した文字の位置までスクロールすることですよね?

ソースを見た感じ、ハイライトされる文字には「highlight」というclassに囲まれるので

      function doHighlight() {
            var word = $("#word").val()
                    .replace(/^\s+|\s+$/g, "")          //前後の空白を除去(gオプションは繰り返し)
        .replace(/\s+/g, " ")               //連続する空白を1つに
        .split(" ");
            for (i in word) {                    //要素数ぶんループ(iには添字が入る)
        if (word[i] != "") {               //空文字であれば処理しない
          $("#target").highlight(word[i]); //#target内のテキストに対し、処理中の語句でハイライト

     // ↓ここを追加
          var ypos = $(".highlight").offset().top; // highlightというクラスを持ってる最初オブジェクトの座標を取得
          window.scrollTo(0 /* 横 */, ypos /* 縦 */); // そこまでスクロール
         }
       }
    }

こういうのかなと思いますがいかがでしょうか?

+追加

スムーズにするなら、こういう感じらしいです。

      function doHighlight() {
            var word = $("#word").val()
                    .replace(/^\s+|\s+$/g, "")          //前後の空白を除去(gオプションは繰り返し)
        .replace(/\s+/g, " ")               //連続する空白を1つに
        .split(" ");
            for (i in word) {                    //要素数ぶんループ(iには添字が入る)
        if (word[i] != "") {               //空文字であれば処理しない
          $("#target").removeHighlight(); // 追加:再検索の時、highlightの再設定(いらなかったら消してください。検索を続けて2回すると動かない問題がありましたので
          $("#target").highlight(word[i]); //#target内のテキストに対し、処理中の語句でハイライト

          var ypos = $(".highlight").offset().top;
      // window.scrollTo(0 /* 横 */, ypos /* 縦 */); // そこまでスクロール
          // 修正↓
          window.scrollTo({
            left: 0 /* 横 */, 
            top: ypos /* 縦 */,
            behavior: "smooth" /* スムーズ */
            });
          }
        }
      }

参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/11 18:54

    ありがとうございます!
    無事にスクロールすることが出来ました!
    もう1つだけお聞きしてもよろしいでしょうか?
    スクロールをスムーズスクロールに変更することは可能でしょうか??
    一度にお願いせず申し訳ありません。
    もし、可能でしたら教えていただけないでしょうか?
    どうぞよろしくお願いいたします。

    キャンセル

  • 2018/10/11 19:04

    下の方の関数を参考にしてください。:)

    キャンセル

  • 2018/10/11 19:11

    ありがとうございます!!

    キャンセル

  • 2018/10/11 19:12

    途中で送信してしまいました。
    chromeやfirefoxでは無事にスクロールされたのですが、
    IEではだめでした。
    (私が使っているのはIE11です。)
    何か対策はあるのでしょうか?
    もし返信が明日になってしまったら申し訳ございません。
    アドバイスを頂けましたら助かります。
    どうぞよろしくお願いいたします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16421questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • トップ
  • JavaScriptに関する質問
  • ページ内検索で検索したワードをハイライト表示。なおかつ一番最初のハイライトへ自動でスクロールさせる