JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<p class="pattern">Mauris sit dolor. Nunc lectus massa, posuere purus ipsum ac vivamus. Auctor posuere, consequat nascetur litora eget montes. Erat purus nulla enim nulla neque ac, nulla arcu eu sem. Ultrices et, nesciunt proin leo, tristique est class rutrum at faucibus ut. Adipiscing sodales tortor. Tincidunt ullamcorper quis nec dolor. Mollis volutpat nulla dolor, amet phasellus pretium ut per suspendisse, id at placerat etiam, sit amet ligula ultricies.</p>

CSS

p.pattern span.highlighted   {background:url(http://www.freeimagehosting.net/uploads/b20e9e0f7f.png) -10px 0;}

JavaScript

// Capture the highlighted text on a page.
$(document).mouseup(function(){
    var text = (document.all) ? document.selection.createRange().text : document.getSelection();
    
    // Find the text on the page.
    var paragraph = $('p.pattern').html();
    
    // Add a class to the text.
    $('p.pattern').html(paragraph.replace(text, '<span class="highlighted">' + text + '</span>'));
});