JavaScript textareaまたはdiv

textareaまたはdiv内の特定の文字だけを選択(select)した状態にすることはできますか？
下記のうだけを選択した状態にすることはできますか？

<textarea>あいうえお</textarea>
<div>あいうえお</div>

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

回答1件

ベストアンサー

こんな感じでしょうか。念の為ですが、以下のサンプルは

テキストエリアをフォーカスした時にテキストエリア内のうが選択される
ボタンを押した時にdiv内のうが選択される。

です。

html
1<!DOCTYPE html>
2<html><body>
3    <textarea id="target" onfocus="selectText()">あいうえお</textarea>
4    <div id="tgtdiv">これはdivですあいうえお</div><button onclick="selectDiv()">div選択</button>
5    <script>
6        function selectText() {
7            const target = document.getElementById("target");
8
9            // https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/setSelectionRange
10            target.setSelectionRange(2,3); // 引数は0始まりの文字数。 3文字目から4文字目を選択
11        }
12        function selectDiv() {
13            const div = document.getElementById("tgtdiv");
14            const range = document.createRange();
15
16            const textnode = div.childNodes[0];
17            range.setStart(textnode, 10);  // これも文字数。
18            range.setEnd(textnode, 11);
19
20            window.getSelection().addRange(range);
21        }
22
23    </script>
24</body></html>

投稿2023/03/08 02:57

編集2023/03/08 02:58

YakumoSaki

総合スコア2027

pouior

2023/03/08 03:06 編集

このケースですと、うが何文字目にあるか、という前提ですが、例えば <textarea>あいうえお12345698かきくけこ*+@[]さしすせそ</textarea> の中から（文字は不特定です）こ*+@[]さを選択状態にしたい場合検出する方法はあるのでしょうか？

yambejp

2023/03/08 03:19

const str="あいうえお12345698かきくけこ*+@[]さしすせそ"; const keyword="こ*+@[]さ"; const start=str.indexOf(keyword); const end=start+keyword.length; console.log([start,end]); console.log(str.substring(start,end));