JSFiddle - React, Tailwind, and code Playground

HTML

<p id="test">This is some text you can highlight by dragging or clicking below.</p>
<span id="trigger">Click here to select "This" and "some"</span>
<a> - Firefox only :-(</a>

<br><br><br><br><br>

<input type="button" value="Get selection" onmousedown="getSelText()"> 
<form name=aform ><textarea name="selectedtext" rows="5" cols="20"></textarea></form>

CSS

#trigger { background: yellow }

JavaScript

var testCase = function () {
    var userSelection;

    if (window.getSelection) {  
        userSelection = window.getSelection();
    }  // No support for IE

    var textNode = document.getElementById('test').firstChild;
    var theRange = document.createRange();

    // select 0th–4th character
    theRange.setStart(textNode, 0);
    theRange.setEnd(textNode, 4);

    // set user selection    
    userSelection.addRange(theRange);

    var textNode = document.getElementById('test').firstChild;
    var theRange = document.createRange();

    // select 8th–12th character
    theRange.setStart(textNode, 8);
    theRange.setEnd(textNode, 12);

    // set user selection    
    userSelection.addRange(theRange);
};

window.onload = function () {
    var el = document.getElementById('trigger');
    el.onclick = testCase;
};
   
function getSelText() {
    var txt = '';
    if (window.getSelection)
    {
    txt = window.getSelection();
    }
    else if (document.getSelection)
    {
    txt = document.getSelection();
    }
    else if (document.selection)
    {
    txt = document.selection.createRange().text;
    }
    else return;
    document.aform.selectedtext.value =  txt;
    }