JSFiddle - React, Tailwind, and code Playground
HTML
<p>This is a paragraph</p>
CSS
.touched {
font-weight: bold;
}
JavaScript
$(document).ready(function()
{
var p = $('p');
p.css({ cursor: 'pointer' });
p.dblclick(function(e) {
var org = p.html();
var range = window.getSelection() || document.getSelection() || document.selection.createRange();
var sword = $.trim(range.toString());
if(sword.length)
{
var newWord = "<span class='touched'>"+sword+"</span>";
//var replaced = org.replace(rx, newWord);
$('p').html(function( _, html ) {
return html.split(/\s+/).map(function( word ) {
return word === sword ? newWord : word;
}).join(' ');
});
}
range.collapse();
e.stopPropagation();
});
});