前提・実現したいこと

テキストエリアに結構長い文章が入っています。
テキストボックスに入れた文字列がテキストエリアの中の文章にあるかどうかを検索し、あれば文字列を選択した状態にした後、その文字列の場所をフォーカスしたいです。

テキストボックスに入れた文字列を検索し、文字列を選択するところまではできました。
検索した文字列が今表示されているテキストエリアの範囲内にある場合は、文字列が選択されている状態なのですぐにわかるのですが、文字列が文章の最後のほうにある場合、選択された文字列を見つけるには、スクロールバーでテキストエリア内の文章を送らないと見つけることができません。

そこで、検索した文字列が文章の最後のほうにある場合でも、自動的にテキストエリア内の文章がその文字列があるところにフォーカスするような動きに直したいのです。

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

※文字列を選択させなければ、検索した文字列が文章の最後のほうにあっても、自動的にテキストエリア内の文章が文字列があるところにフォーカスされます。

発生している問題・エラーメッセージ

該当のソースコード

ソースコード

function FirstSearch(){

//「KensakuMoji」にテキストボックスに入れた文字列の値をセット
var KensakuMoji = document.getElementById("txtb").value;
    //alert("KensakuMojiは"+ KensakuMoji); 

//regに「g」フラグを設定し、正規表現の文字列検索をセットする
reg = new RegExp(KensakuMoji, "g");

//「Txt_1」に、ﾃｷｽﾄｴﾘｱの文章をセット
var Txt_1=document.getElementById("Txt_Bun").value;

//検索文字がテキストエリアの文章の中にあるか正規表現で検索
var result = Txt_1.match(reg);

if(result != null) {
    //alert("文字列が見つかりました"); 

    //Searchで文書頭から文字列を検索し、見つかった文字の位置を取得
           var Ichi_First = Txt_1.search(reg);
    //alert("Ichi_Firstは"+ Ichi_First); 

    //検索した文字列を選択する
	document.getElementById("Txt_Bun").setSelectionRange(Ichi_First, Ichi_First + 1); 

//document.getElementById("Txt_Bun").setSelectionRange(Ichi_First, Ichi_First); 


//↑ここで「(Ichi_First, Ichi_First + 1)」を「(Ichi_First, Ichi_First)」にして、文字列を選択するようにしなければ、文章の最後のほうに検索文字列があっても、テキストエリア内の文章が自動的に検索文字列にフォーカスされます


    //カーソルがある位置のテキストエリアを表示するため
    //テキストエリアをフォーカスし直す
     document.getElementById("Txt_Bun").focus();

}else{
    //検索したい文字が見つからない場合
    alert("文字列が見つかりませんでした"); 

    //テキストエリアをフォーカスし直す
     document.getElementById("txtb").focus();
     document.getElementById("Txt_Bun").focus();
}
}

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="Shift_JIS">
	<title></title>

	<link rel="stylesheet" type="text/css" href="Check.css" media="all">

	<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="searchhi_slim.js"></script>


<style>
</style>


</head>


<body>

	文字列：<input type="txt" id="txtb"><br>
	<input type="button" value="検索" onclick="FirstSearch()">

</DIV>



<DIV style="margin-left:35%;">
	<input type="file" id="loadFile" size="106"><br>
	<textarea id="Txt_Bun" rows="30" cols="81"  style="font-size:1em;"></textarea>

</DIV>









<!-- スクリプト -->

<script type="text/javascript" src="Kensaku111.js" charset="Shift_JIS"></script>




</body>
</html>







### 試したこと

いろいろなサイトを検索してみましたが、解決しませんでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2018/02/22 03:20

HTMLも提示いただけませんか？あと質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

cyokucyoku

2018/02/22 08:44

HTMLも載せました。よろしくお願いします。

行動規範の内容に同意します

回答1件

複数箇所見つかった場合とかどうするかはおいておいて
テキストエリアから文字をフォーカスする

javascript
1$(function(){
2  $('[type=button][value=search]').on('click',function(e){
3    var v1= $('#hoge').val();
4    var v2= $('#fuga').val();
5    var start=v2.indexOf(v1);
6    var end=start+v1.length;
7    $('#fuga')
8      .prop({"selectionStart":start,"selectionEnd":end})
9      .trigger("focus");
10  });
11});

HTML
1<input type="text" id="hoge" value="ここ">
2<input type="button" value="search">
3<hr>
4<textarea id="fuga">
5ほげほげほげほげほげ
6ほげほげほげほげほげ
7ほげほげほげほげほげ
8ほげほげほげほげほげ
9ほげほげほげほげほげ
10ほげほげほげほげほげ
11ほげほげほげほげほげ
12ほげほげほげほげほげ
13ほげほげほげほげほげ
14ほげほげほげほげほげ
15ほげほげほげほげほげ
16ほげほげほげほげほげ
17ほげほげほげほげほげ
18ほげほげほげほげほげ
19ほげほげほげほげほげ
20ほげほげほげほげほげ
21ほげほげほげほげほげ
22ほげほげほげほげほげ
23ほげほげほげほげほげ
24ほげほげほげほげほげ
25ほげほげほげほげほげ
26ほげほげほげほげほげ
27ほげほげほげほげほげ
28ほげほげほげほげほげ
29ほげほげほげほげほげ
30ほげほげほげほげほげ
31ほげほげほげほげほげ
32ほげほ ここ ほげほげ
33ほげほげほげほげほげ
34ほげほげほげほげほげ
35</textarea>

追記

ピュアなjavascriptで書くとこうです

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  document.querySelector('[type=button][value=search]').addEventListener('click',function(e){
3    var v1= document.querySelector('#hoge').value;
4    var v2= document.querySelector('#fuga').value;
5    var start=v2.indexOf(v1);
6    var end=start+v1.length;
7    with(document.querySelector('#fuga')){
8      selectionStart=start;
9      selectionEnd=end;
10      focus();
11    }
12  });
13});

投稿2018/02/15 10:06

編集2018/02/16 05:15

yambejp

総合スコア118165

cyokucyoku

2018/02/16 05:05

早速の回答ありがとうございます。とりあえず、書いていただいたものを丸写しで試してみましたが、全く動きませんでした。これはjQueryを読み込んでいなければ使えないものでしょうか？

yambejp

2018/02/16 05:16 編集

jQueryバージョンでの例示でしたが馴染みがないようでしたらピュアなjavascriptバージョンのものも追記しておきましたので参考にしてください（htmlの部分は前回のものをそのまま流用してください）

cyokucyoku

2018/02/22 02:24

回答を書いてくださったのに御返事がおそくなり、申し訳ありません。ピュアなjavascriptバージョンのものを試してみました。が、「ここ」という単語は選択した状態になるのですが、テキストエリアは初めの方の文章が表示されるので、スクロールバーで送らなければ「ここ」が選択されていることがわかりません。 IE11で動かしているのですが、その辺が関係ありますか？ちなみに、Google Chromeでも同じような状態でした。

kszk311

2018/02/22 08:56

横から失礼します。 textarea内の自動折り返しの分は、textareaの幅とフォントサイズなどで計算が必要そうですが、下記URLを参考にいけそうな気がします。 https://gist.github.com/taoyag/2137278 http://javascript123.seesaa.net/article/139520404.html

cyokucyoku

2018/02/27 02:22

返信が遅くなり、申し訳ありません。回答をありがとうございます。教えていただいたサイトを見ました。できるかどうかわかりませんが、とりあえずやってみます。

行動規範の内容に同意します