Q&A
ありがとうございます！
無事にスクロールすることが出来ました！
もう1つだけお聞きしてもよろしいでしょうか？
スクロールをスムーズスクロールに変更することは可能でしょうか？？
一度にお願いせず申し訳ありません。
もし、可能でしたら教えていただけないでしょうか？
どうぞよろしくお願いいたします。
ページ内検索で複数単語を検索させて、ハイライト表示させるまではできました。
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>
回答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
総合スコア297
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
総合スコア198
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/12 01:32
2018/10/12 01:35