JSFiddle - React, Tailwind, and code Playground

HTML

<div id="or">
    <p>hello</p>
</div>
<div id="di"> <span id="sp">
        <p id="pp">world</p>
    </span>
 <span id="spa">
        <img src="http://jsfiddle.net/img/logo.png" style="background: #4679bd;" />
    </span>

</div>
<div id="out">
    <p>test</p>
</div>

CSS

p#pp {
    pointer-events: none;
    -webkit-user-select: none;
}

JavaScript

$('div#di').on('click', 'span', function () {
    $('div#out p').text(selection);
});

var selection = '', onSelect = function(_event) {
    if($(_event.target).is(':not(div#di span)'))
        selection = window.getSelection().toString();
    else return false;
};
$(document).mouseup(onSelect).keyup(onSelect).mousedown(onSelect);