JSFiddle - React, Tailwind, and code Playground

by nacles

HTML

<body>
    	<h1 id="0">
			H1 Nam ac est nunc. bla bla bla bla bla bla bla bla bla h1
		</h1>	
    <div id="1">div Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque, dolor nec luctus ullamcorper, massa quam interdum metus, ac ultricies mauris risus nec purus. Fusce et nunc mi, ut consequat velit. Cras orci sapien, tincidunt sed iaculis ac, commodo sed neque. Sed gravida, quam id imperdiet venenatis, odio erat faucibus nisi, sed imperdiet velit nulla nec risus. Duis eget vehicula nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tincidunt, augue vitae feugiat cursus, nunc nunc volutpat ligula, ac molestie purus lectus sit amet mauris. Nunc nec felis tortor, a dignissim eros. Vivamus diam mauris, scelerisque molestie bibendum ut, dignissim quis neque. Aliquam ac turpis mi. Sed pretium interdum orci, sed semper lorem viverra id. Vivamus diam eros, convallis sit amet facilisis in, facilisis eget nibh. Aenean porttitor, neque nec ultrices laoreet, dolor metus cursus purus, non auctor lectus urna a enim. In nec lectus nunc, ac commodo arcu. Proin bibendum ligula non mi bibendum porta. Nam ac metus a magna tristique euismod eget vitae purus. div</div>
    <p id="2">"P" Vestibulum tincidunt, lectus at bibendum commodo, lectus velit commodo libero, et fermentum odio arcu sit amet dui. Quisque feugiat augue in erat scelerisque non mollis arcu facilisis. Nunc a dui sapien. Quisque quis nisi eu velit tincidunt placerat. Nunc vitae eros erat. Duis posuere diam ut orci adipiscing a ullamcorper est sollicitudin. Cras ipsum dolor, commodo viverra aliquet vel, pulvinar at sapien. Suspendisse eget justo et neque bibendum tempor. Morbi aliquet enim id arcu convallis cursus. Curabitur pellentesque condimentum dolor non sagittis. Ut tempor, erat in ullamcorper porta, purus erat tincidunt felis, ac auctor mauris libero nec purus. Praesent nisl justo, rutrum at rhoncus at, accumsan at mi. Fusce hendrerit...

CSS

span {
    background-color:yellow;
}

JavaScript

var btn = document.getElementById('btn');

btn.addEventListener('click', function (event) {
    click();
});

function click() {
    surroundSelection(document.createElement('span'));
}




function surroundSelection(element) {



    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            alert(sel);

            var range = sel.getRangeAt(0).cloneRange();



            range.surroundContents(element);
            sel.removeAllRanges();
            sel.addRange(range);



        }
    }
}