常連

拍手喝采

自己紹介

ページ内検索で複数単語を検索させて、ハイライト表示させるまではできました。
jquery.highlight-5.js を使用

[サイト](http://rental-office.co.jp/test/search.html)

ハイライト表示が複数あったとして、一番最初のハイライトの文字のところまで、
自動でスクロールするように設定したいのですが、どうすれば良いのかがわかりません。

テキストの前半に「あいうえお」後半に「さしすせそ」とテキストがあります。
「さしすせそ」を入力した時に「さしすせそ」の一番最初の位置まで自動的に移動させたい。

どうかご教授いただけないでしょうか？

どうぞよろしくお願いいたします。

```ここに言語を入力
<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="入力された文字をハイライト" /> 

半角スペースで複数単語検索可能

<a href="javascript:void($('#target').removeHighlight());">ここをクリックでハイライト消去</a>

<div id="target">
		テスト 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		あいうえおかきくけこ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
		さしすせそ 
	</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>


```