JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="taggable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</h2>
<p>You can't select me my friend.</p>
<p class="taggable">Lorem ipsum dolor sit amet, a. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>

<textarea id="yourTextAreaId"></textarea>

<p>Tag: <span id="showtag"></span></p>

CSS

/*** Works on common browsers ***/
.taggable::selection {
    background-color: green;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

/*** Mozilla based browsers ***/
.taggable::-moz-selection {
    background-color: green;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

/***For Other Browsers ***/
.taggable::-o-selection {
    background-color: green;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

.taggable::-ms-selection {
    background-color: green;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

/*** For Webkit ***/
.taggable::-webkit-selection {
    background-color: green;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

JavaScript

// highlight a word/term quicker and smarter: http://stackoverflow.com/a/35103840/1185126
jQuery(document).ready(function(e){

    (function(els){
        for(var i=0;i<els.length;i++){
            var el = els[i];
            el.addEventListener('mouseup',function(evt){
                if (document.createRange) { // Works on all browsers, including IE 9+
                    var selected = window.getSelection();
                    /* if(selected.toString().length){ */
                    var	d = document,
                        nA = selected.anchorNode,
                        oA = selected.anchorOffset,
                        nF = selected.focusNode,
                        oF = selected.focusOffset,
                        range = d.createRange();

                    range.setStart(nA,oA);
                    range.setEnd(nF,oF);

                    // Check if direction of selection is right to left
                    if(range.startContainer !== nA || (nA === nF && oF < oA)){
                        range.setStart(nF,oF);
                        range.setEnd(nA,oA);
                    }

                    // Extend range to the next space or end of node
                    while(range.endOffset < range.endContainer.textContent.length && !/\s$/.test(range.toString())){
                        range.setEnd(range.endContainer, range.endOffset + 1);
                    }
                    // Extend range to the previous space or start of node
                    while(range.startOffset > 0 && !/^\s/.test(range.toString())){
                        range.setStart(range.startContainer, range.startOffset - 1);
                    }

                    // Remove spaces
                    if(/\s$/.test(range.toString()) && range.endOffset > 0)
                        range.setEnd(range.endContainer, range.endOffset - 1);
                    if(/^\s/.test(range.toString()))
                        range.setStart(range.startContainer, range.startOffset +...