teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップJavaScriptに関する質問
JavaScript

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

Q&A

解決済

2回答

5937閲覧

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

Riko
Riko

総合スコア15

JavaScript

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

1グッド

2クリップ

投稿2018/10/11 09:13

1

2

ページ内検索で複数単語を検索させて、ハイライト表示させるまではできました。
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>
DrqYutoが👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2件

0

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

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

投稿2018/10/11 12:29

編集2018/10/11 12:59
miyakichi
miyakichi

総合スコア297

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Riko
Riko

2018/10/12 01:32

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

2018/10/12 01:35

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

0

ベストアンサー

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

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

javascript
1      function doHighlight() {
2            var word = $("#word").val()
3                    .replace(/^\s+|\s+$/g, "")          //前後の空白を除去(gオプションは繰り返し)
4        .replace(/\s+/g, " ")               //連続する空白を1つに
5        .split(" ");
6            for (i in word) {                    //要素数ぶんループ(iには添字が入る)
7        if (word[i] != "") {               //空文字であれば処理しない
8          $("#target").highlight(word[i]); //#target内のテキストに対し、処理中の語句でハイライト
9
10　　　　　// ↓ここを追加
11          var ypos = $(".highlight").offset().top; // highlightというクラスを持ってる最初オブジェクトの座標を取得
12          window.scrollTo(0 /*　横　*/, ypos　/* 縦　*/);　//　そこまでスクロール
13　        }
14　      }
15    }

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

＋追加

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

javascript
1      function doHighlight() {
2            var word = $("#word").val()
3                    .replace(/^\s+|\s+$/g, "")          //前後の空白を除去(gオプションは繰り返し)
4        .replace(/\s+/g, " ")               //連続する空白を1つに
5        .split(" ");
6            for (i in word) {                    //要素数ぶんループ(iには添字が入る)
7        if (word[i] != "") {               //空文字であれば処理しない
8          $("#target").removeHighlight(); // 追加：再検索の時、highlightの再設定（いらなかったら消してください。検索を続けて２回すると動かない問題がありましたので
9          $("#target").highlight(word[i]); //#target内のテキストに対し、処理中の語句でハイライト
10
11          var ypos = $(".highlight").offset().top;
12 　　　　　// window.scrollTo(0 /*　横　*/, ypos　/* 縦　*/);　//　そこまでスクロール
13          // 修正↓
14          window.scrollTo({
15            left: 0 /*　横　*/, 
16            top: ypos　/* 縦　*/,
17            behavior: "smooth" /* スムーズ　*/
18            });
19          }
20        }
21      }

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

投稿2018/10/11 09:45

編集2018/10/11 10:04
yeondev
yeondev

総合スコア198

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Riko
Riko

2018/10/11 09:54

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

2018/10/11 10:04

下の方の関数を参考にしてください。：）
Riko
Riko

2018/10/11 10:11

ありがとうございます！！
Riko
Riko

2018/10/11 10:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

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