How to move marked character based on text selection in javascript

Question

I want to move the marked _#current selected text#_ exactly around the current text has selected. So let's see in an example.

1. Step 1: still no text has selected, so the String is:

   let stringVal = "Hello friends, let's program with javascript";

---

2. Step 2: Hello friends has selected, so the String is:

   stringVal = "_#Hello friends#_, let's program with javascript";

---

3. Step 3: Hello friends, let's has selected, so the String is:

   stringVal = "_#Hello friends, let's#_ program with javascript";

   As you can see, here let's added to the selection text so the end of mark #_ moves ahead to the same size of , let's.

---

4. Step 4: with has selected, so the String is:

   stringVal = "_#Hello friends, let's#_ program _#with#_ javascript";

   As you can see, here with separately marked as _#with#_, because it's not attached to the previous text nor the next text.

---

5. Step 5: gram with javascript has selected, so the String is:

   stringVal = "_#Hello friends, let's#_ pro_#gram with javascript#_";

   As you can see, here gram added before with, so the starter mark _# moves back to the same size of gram, on other hand javascript added after with, so the end mark #_ moves ahead to the same size of javascript.

---

6. Step 6: let's program has selected, so the String is:

   stringVal = "_#Hello friends, #_ _#let's program#_ _#with javascript#_";

   This Step is complex, as you can see, here let's and gram re-selected and pro added after let's and before gram, so the starter mark _# moves back before let's and end mark #_ moves ahead after gram. Also we should be careful about _#Hello friends, as it doesn't have end mark so we must added _#Hello friends, #_ and also with javascript#_ doesn't have starter mark so we must added _#with javascript#_.

---

7. Step 7: let's program with javascript has selected, so the String is:

   stringVal = "_#Hello friends, let's program with javascript#_";

   This Step is easy, as you can see all text has selected so, there we only have to mark all one time.

What I did:

let stringVal = "Hello friends, let's _#program#_ with _#javascript language#_";
stringVal = stringVal.trim().replace(/\s+/g, ' ');
const search = 'Hello friends'.trim().replace(/\s+/g, ' ');
console.log('before: ', stringVal);
let copyString = stringVal;
copyString = copyString.replace(/_#(\w+(?: \w+)*)#_/g, "$1");
copyString = copyString.replace(search, `_#${search}#_`);
console.log('aafter: ', copyString);

Above code result is: _#Hello friends#_, let's program with javascript language.

Correct one is: _#Hello friends#_, let_'s _#program#_ with _#javascript language#_.

Here I couldn't find a stable solution, in my solutions it removes all previous style, and styles again only apply on only current selected text.

But I want to save the status of previous selected text and add new style, if there was any overlap, then it will be overridden.

Also If there is library to do this things you can suggest me

My Last try:

I once tried to save the index of all marked style, then compare it with index of current selected text, but it is also didn't respond as well, code is here.