【JavaScript】 テキストの「選択」を解除する時に「カーソル」を残す

こんにちは、さち です。

今回は、JavaScript でテキストなどの「選択」を解除するときに、「カーソル」を選択範囲の終点（または始点）に残す方法について書いていきます。

備忘録ですが、同じことをやりたい方のお役に立てれば幸いです。

選択を解除するとカーソルが消える

1. このようなテキストがあります。
   
2. テキストを「選択」します。
   
3. 次のような、「選択」したテキストを「赤色」する JavaScript を実行します。最後に「選択」を解除する処理をしています。

   // タグを作成
   let span = document.createElement('span');
   span.classList.add('red');
   
   // 選択したテキストをタグで囲む
   let selection = document.getSelection();
   let range = selection.getRangeAt(0);
   range.surroundContents(span);
   
   // 選択を解除
   selection.removeAllRanges();

4. テキストの処理はできましたが、「カーソル」が消えてしまいました。
   
5. こんな感じで、選択範囲の終点に「カーソル」を置きたかったんですが、上手くいきませんでした……。
   

カーソルを残す方法

「カーソル」を選択範囲の「終点」に置くように改善してみます。

1. テキストを「選択」した状態です。
   
2. 先程の JavaScript です。選択を解除するメソッドを collapseToEnd() に変更しました（「始点」に置く場合は collapseToStart() にする）。これを実行します。

   // タグを作成
   let span = document.createElement('span');
   span.classList.add('red');
   
   // 選択したテキストをタグで囲む
   let selection = document.getSelection();
   let range = selection.getRangeAt(0);
   range.surroundContents(span);
   
   // 選択を解除
   selection.collapseToEnd();

3. 「カーソル」を選択範囲の終点に置くことができました。
   

ちなみに、「collapse」は「折りたたむ」「潰れる」などの意味です。