【javascript】pやdivなどの要素内のテキストを選択状態にしたい

Question

やりたいこと

pやdiv、spanなどのテキスト入力エリア以外の要素内の文字を、
指定範囲で選択状態にしたい

環境

Firefox Developer Edition 66.0b13 (64-bit）

やったこと

ちょっと古いですが、以下サイトを丸コピしました。
http://takitake.hatenablog.com/entry/20090408/p1

<span>abcde</span>

<script>
    var range = document.createRange();
    var node = document.getElementsByTagName('span').item(0);
    var startOffset = 0;
    var endOffset = 1;

    range.setStart(node, startOffset);
    range.setEnd(node, endOffset);
</script>

しかし、上記のコードでは対象箇所が選択されません。

---

また、上記コードを以下のように書き直したところ、

IndexSizeError: Index or size is negative or greater than the allowed amount

とWebコンソールに表示されます。

<span>abcde</span>

<script>
    var range = document.createRange();
    var node = document.getElementsByTagName("span").item(0);
    var startOffset = 1;            // ここを変えた
    var endOffset = 3;              // ここを変えた

    range.setStart(node, startOffset);
    range.setEnd(node, endOffset);
</script>

しかし、abcdeと5文字なので、1〜3は範囲内かと思います。

---

これは使い方を間違っているのでしょうか。
正しい方法をご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。

よろしくお願いいたします

Answer 1

startNode が Text, Comment, あるいは CDATASection タイプの Node であるとき、startOffsetはstartNodeの開始位置からの文字数です。その他のNodeタイプの場合、 startOffsetはstartNodeからの子ノード数です。

Range.setStart - Web API | MDN

とのこと。

また、Rangeオブジェクトを選択範囲にするにはSelectionオブジェクトにあれこれする必要があります。
selection - Web API | MDN

そんなこんなで、解決方法は、以下のとおりです。

var node = document.getElementsByTagName("span").item(0);

↑を↓に変更。

var node = document.getElementsByTagName("span").item(0).firstChild;

↓これを最後に追加。

window.getSelection().addRange(range);

Comments

[nnahito]

ありがとうございます！
無事希望通りの動作ができました！！＞＜