JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry . Lorem Ipsum has been the industry 's standard dummy text ever since the 1500s , When an unknown printer took a galley of type and scrambled it to make a type specimen book . It has survived not only five centuries , but Also the leap into electronic typesetting , remaining Essentially unchanged . It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum .</div>
<button>Highlight</button>

JavaScript

$("button").click(function () {
    var selection = window.getSelection(),
        text = "[INFO]" + selection + "[/INFO]",
        content = $("div").text(),
        range = selection.getRangeAt(0),
        startText = content.substring(0, range.startOffset), // cut from 0 to beginning of highlight
        endText = content.substring(range.endOffset, content.length); // cut from end of highlight to end of text
    $("div").html(startText + text + endText);
});