JSでdiv内容要素の最後の文字の位置を取得したい

Question

前提・実現したいこと

JavaScriptで簡易的なエディタを作っています。
文字列が一定の幅を超えたときにハイライトする処理を実装しているのですが、
ハイライト範囲を指定するために文字列の最後の位置情報を取得したいのですが、取得できずに困っています。

取得したいHTMLは下記のパターンで contenteditable="true" を指定しています。
下記の例で、いずれも最後の「ト」の位置を取りたいです。(x,y,width,height)

HTMLパターン1

<div id="sample" class="sample1" contenteditable="true">
テキストテキストテキストテキストテキストテキストテキスト ← 最後の「ト」の位置を取りたい
</div>

HTMLパターン2

<div id="sample" class="sample1" contenteditable="true">
テキストテキストテキストテキストテキストテキストテキスト
<br>
テキストテキストテキストテキストテキストテキストテキスト ← 最後の「ト」の位置を取りたい
</div>

試したこと

現在の方法としてテキストの最後に <span class="last__position"></span> を追加して、
last__positionの情報をgetBoundingClientRect()で取得しています。

<div id="sample" class="sample1" contenteditable="true">
テキストテキストテキストテキストテキストテキストテキスト
<br>
テキストテキストテキストテキストテキストテキストテキスト<span class="last__position"></span> ← 最後にspanを追加
</div>

ただ、こちらの方法だと常に最後にspanタグを入れる処理が必要になったり、
その他不都合が色々とでてきてしまったため、このようなことをしなくても最後の文字の位置情報を取得する方法を知りたいです。

よろしくお願い致します。

Answer 1

対象の文字を選択するRangeオブジェクトを作成して、Range の getBoundingClientRect() か getClientRects() を呼べば良いです。<span>は不要です。

Comments

[nekoneko21213]

@int32_t
ありがとうございます！ご教授頂いた方法でdocument.createRange()した後にgetBoundingClientRect()で取得できました！！spanがなくなりスッキリしました。ありがとうございました。

Answer 2

テキストノードの位置はつかめないのでspanでラップするしかないと思います

Comments

[nekoneko21213]

@yambejp
ありがとうございました。spanタグで対応したいと思います。