First Time I am asking something here I hope I will be precise enough. I am trying to make a simple extension for chrome that highlight the selected text when I press "H" on my keyboard, but I have some issue :

Use Case

1. The user select with his mouse a piece of text.
2. The user press H on his keyboard
3. Bibbidi-Bobbidi-Boo the selected text is highlighted.

Code so far

To detect when user press H and to get the piece of text he selected :

window.addEventListener('keydown', e => {
  if(e.code == "KeyH")
  {
    var selected = window.getSelection()
    //SimpleHighLight(selected);
    ComplexHighLight(selected);
  }
});

I have coded coded a simple way to do what I want like this :

function SimpleHighLight(selected){
  var selectedText = selected.toString();
  if(selectedText.length != 0)
  {
    var range = selected.getRangeAt(0);
    var element = selected.anchorNode.parentNode;
    var highlited = "<span style='background: rgb(255,255,0)'>" + selectedText + "</span>";
    var reg = new RegExp(selectedText,"g");
    var text = element.innerHTML.replace(reg, highlited);
    element.innerHTML = text;
  }
}

It work fine for piece of text in an unique DOM element and when there is no other occurrence of the selected text but I want it to always work, like in a case of my selected text comes from 2 different paragraphs.

So I did this :

function ComplexHighLight(selected){
  var selectedText = selected.toString();
  if(selectedText.length != 0)
  {
    console.log(" Selection : " + selectedText);
    var range = selected.getRangeAt(0);
    if(!range.collapsed)
    {
        var startNode = range.startContainer;
        var startOffset = range.startOffset;
        var endNode = range.endContainer;
        var endOffset = range.endOffset;

        if(startNode == endNode) //Means that its in the same node element
        {
          var highlited = "<span style='background: rgb(255,255,0)'>" + selectedText + "</span>";
          startNode.replaceData(startOffset, endOffset-startOffset, highlited);
          startNode.parentNode.innerHTML = startNode.nodeValue;
        }
    }
  }  
}

That's only a part of the problem where I handle when a piece of text is in the same element (I am already too much in trouble to handle when the selected text comes from multiples elements :( ).

Issue

On paper, it should work, but the main issue is that when I do : startNode.parentNode.innerHTML = startNode.nodeValue; the <span> division is given to innerHTML as a string and not some HTML stuff.

I have worked around this for about the whole evening but I can't fix it, does anyone have an idea of how I should do that ?