JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<p>The <b>panda</b> (<i>Ailuropoda melanoleuca</i>, <small>lit.</small> "black and white cat-foot"),<sup id="cite_ref-Scheff_Duncan_2-0" class="reference"><a href="#cite_note-Scheff_Duncan-2"><span>[</span>2<span>]</span></a></sup> also known as the <b>giant panda</b> to distinguish it from the unrelated <a href="/wiki/Red_panda" title="Red panda">red panda</a>, is a <a href="/wiki/Bear" title="Bear">bear</a><sup id="cite_ref-Lindburg.2C_Donald_G..3B_Baragona.2C_Karen_2004_3-0" class="reference"><a href="#cite_note-Lindburg.2C_Donald_G..3B_Baragona.2C_Karen_2004-3"><span>[</span>3<span>]</span></a></sup> native to south central <a href="/wiki/China" title="China">China</a>.<sup id="cite_ref-iucn_1-1" class="reference"><a href="#cite_note-iucn-1"><span>[</span>1<span>]</span></a></sup> It is easily recognized by the large, distinctive black patches around its eyes, over the ears, and across its round body. Though it belongs to the order <a href="/wiki/Carnivora" title="Carnivora">Carnivora</a>, the panda's diet is over 99% <a href="/wiki/Bamboo" title="Bamboo">bamboo</a>.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span>[</span>4<span>]</span></a></sup> Pandas in the wild will occasionally eat other grasses, wild tubers, or even meat in the form of birds, rodents or carrion. In captivity, they may receive honey, eggs, fish, yams, <a href="/wiki/Shrub" title="Shrub">shrub leaves</a>, oranges, or bananas along with specially prepared food.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span>[</span>5<span>]</span></a></sup><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span>[</span>6<span>]</span></a></sup></p>
<p>The giant panda lives in a few mountain ranges in central China, mainly in <a href="/wiki/Sichuan" title="Sichuan">Sichuan</a> province, but also in the <a href="/wiki/Shaanxi" title="Shaanxi">Shaanxi</a> and <a href="/wiki/Gansu" title="Gansu">Gansu</a> provinces.<sup id="cite_ref-7" class="reference"><a...

CSS

#end {
    background-color:green;
    
}

#start{
    background-color:red;
}

JavaScript

$('body').on('mouseup touchend',mark);

function mark(){

var sel = window.getSelection();

if (sel.getRangeAt) {
    rangeS = sel.getRangeAt(0).cloneRange();
    rangeE = sel.getRangeAt(0).cloneRange();
    rangeOriginal = sel.getRangeAt(0).cloneRange();
}

rangeS.collapse(true);

rangeE.collapse(false);


// Create the marker element containing a single invisible character using DOM methods and insert it
markerEndEl = document.createElement("span");
markerEndEl.id = "end";
markerEndEl.appendChild(document.createTextNode("END"));
rangeE.insertNode(markerEndEl);


// Create the marker element containing a single invisible character using DOM methods and insert it
markerStartEl = document.createElement("span");
markerStartEl.id = "start";
markerStartEl.appendChild(document.createTextNode("START"));
rangeS.insertNode(markerStartEl);

    
  // reselect back the originaly selected text  
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(rangeOriginal); 
    
}