How to highlight a user selected text which is not contained within a single text node using vanilla js?

i want to get the user selection then replace them with mark tag on each text node inside of an element if the user selected two text node which are child, grandchild (for ex: inside a tag which is child), so surround the first node with <mark>first text node</mark> and the second one like this <mark><a>partial of second</a></mark><a>rest which is not highlighted</a>

<div>
<p id="first" data-selectable-paragraph="">
At the very first age, JavaScript was called LiveScript. An engineer named Brendan Eich has created JavaScript in 1995. There was a little confusion about the name with Java and JavaScript. After several months Microsoft released JScript with Internet Explorer 3. After that Netscape submitted JavaScript to Ecma International. In 1999 ECMAScript edition 3 launched and it has stayed pretty much stable ever since.
</p>
<p>
Another Selection <span> you could do</span>
</p>
<p id="second" data-selectable-paragraph="">
Range is something I discovered recently, which again showed me that the possibilities with the Javascript and the DOM are truly endless. As stated on Mozilla’s developer site, range ‘represents a fragment of a document that can contain nodes and parts of text nodes’. So, if you create of select a section of a document, range could tell you the nodes that it contains, its starting and ending positions relative to the document, it can clone its content ,and much more. (Read more from the docs: 
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Range">
https://developer.mozilla.org/en-US/docs/Web/API/Range
</a>)
</p>
</div>

let's say that the user selected 3 texts and highlighted them which i want to result in this structure-> Brief explanation: if the parent or grand parent has data-selectable-paragraph then highlight the text nodes inside the element and its parent if it is grandchild

<div>
<p id="first" data-selectable-paragraph>
At the very first age, JavaScript was called LiveScript. An engineer named Brendan Eich has created JavaScript in 1995. There was a little confusion about the name with Java and JavaScript. After several months Microsoft released JScript with Internet Explorer 3. After that Netscape submitted JavaScript to Ecma International. In 1999 ECMAScript edition 3 <mark>launched and it has stayed pretty much stable ever since.</mark>
</p>
<p data-selectable-paragraph>
<mark>Another Selection </mark><mark><span> you could do</span></mark>
</p>
<p id="second" data-selectable-paragraph>
<mark>
Range is something I discovered recently, which again showed me that the possibilities with the Javascript and the DOM are truly endless. As stated on Mozilla’s developer site, range ‘represents a fragment of a document that can contain nodes and parts of text nodes’. So, if you create of select a section of a document, range could tell you the nodes that it contains, its starting and ending positions relative to the document, it can clone its content ,and much more. (Read more from the docs:
</mark>
<mark>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Range">
https://developer.mozilla.org/en-US/docs/Web/API/Range
</a>
</mark>
<mark>)</mark>
</p>
</div>

what i've found so far was window.getSelection().getRangeAt(0).commonAncestorContainer.hasAttribute("data-selectable-paragraph"); on mouse up but i don't know what to do next

from How to highlight a user selected text which is not contained within a single text node using vanilla js?