前提・実現したいこと

twitterのようにcontenteditableを利用して、ハッシュ記号(#)と文字列を入れたら、正規表現でreplaceし、innerHTMLで置き換えることで文字の色を変更しようと考えています。

JavaScriptのinnerHTMLを実行するとcaretの位置がcontenteditableの先頭に来てしまうので、それをinnerHTMLで置き換える前の位置に戻したいです。

下記③のコード間違いのご指摘、またはもっと良いやり方をご教授いただけないでしょうか？
どうぞよろしくお願いいたします。

検討・実施したこと

①innerHTML実行前のcaret位置の取得はできました。

下記のリンク先にあるコードでカーソル位置が前から何文字目なのかという文字数を取得することができました。

https://stackoverflow.com/questions/4811822/get-a-ranges-start-and-end-offsets-relative-to-its-parent-container/4812022#answer-4812022

※上記リンクのshow code snippetを覧ください。※下記青文字のところです。

②setSelectionRangeで実装しようと検討しました。

contenteditable未対応（inputまたはtextareaしか対応）なので実装できませんでした。

③右ボタンを指定回数押すは期待通りできませんでした。

下記の通り実装したのですが、[Select text]ボタンを押してもcontenteditableの先頭にcaretがある状態でした。

html
1//右ボタンを押すテスト
2<div id="editor" contenteditable="true" class="border">A <i>wombat</i> is a marsupial<br> native to <b>Australia</b></div>
3
4<button onclick="selectText()">Select text</button>
5
6<script>
7    function selectText() {
8        const input = document.getElementById('editor');
9        input.focus();
10        input.dispatchEvent( new KeyboardEvent( "keydown", { keyCode: 39 }));
11    }
12
13</script>
14