handling intersection between selection markings

I have a mark button on UI, clicking which, any user selection is marked red. No problems here. I achieve this by document.execCommand("insertHTML")

But I have an additional requirement that if the new selection is created which is the intersection of old selections markings, old selection's red marking should disappear.

As an example:

In the following image: this and testing are marked. Now if I select his is tes from the start and click mark, old markings of this and testing should go away and only his is tes should be marked because there is an intersection.

code:

const button = document.getElementById("button");

button.addEventListener('click', ()=>{
        const s = window.getSelection();
  const selectionStr = s.toString();
  document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`);
})

.bg-red {  
background: red;
}

<div contenteditable="true">
 this is testing  this is testing  this is testing
</div>

<button id="button">mark</button>

from handling intersection between selection markings