javascript - マウスで選択した文字列を編集して文字列全体に戻す方法

Question

これまでのところ、次のコードがあります。

<div id="allText">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
</div>

<button type="button" id="editButton">Edit</button>

<script>
    $(function(){

      $("#editButton").click(function () {

        var txt = '';
        if (window.getSelection) {
            txt = window.getSelection();
        } else if (window.document.getSelection) {
            txt =window.document.getSelection();
        } else if (window.document.selection) {
            txt = window.document.selection.createRange().text;
        }
        var n = txt.toString();
        n = n.replace("</li><li>","<br>"); 
    //document.getElementById("allText").innerHTML=n; 
        console.log(n);
      });

    });

</script>

マウスを使用して途中でいくつかのテキストを選択したいのですが、編集ボタンをクリックすると、選択されたテキストが更新され、選択されていない他のテキストは同じままになります。選択したテキストを取得して置換することはできますが、その置換文字列を文字列全体の真ん中に戻す方法がわかりません。

例：私が選択した場合のように

    </li>
<li>text3</li>
<li>

最終的な文字列を

<li>text1</li>
<li>text2<br>text3<br>
text4</li>
<li>text5</li>

何か案が？