JSFiddle - React, Tailwind, and code Playground

HTML

<p>First of all, I suggest you be prepared to accept a certain level of inaccuracy. Trying to parse natural languages is an exercise in madness. Let us assume, then, that all sentences are punctuated by `.`, `!`, or `?`. "We should allow quoted sentences!" We can forget about interrobangs and so forth for the moment.</p>
<br/>
<br/>
<br/>
Result: <div id="result"></div>

CSS

span {
    border: 1px dashed blue;
    background: #efefef;
    margin:2px;
}
span:hover {
    background: yellow;
}
div {
    color:red;
}

JavaScript

$('p').each(function() {
        var sentences = $(this)
            .text()
            .replace(/(((?![.!?]['"]?\s).)*[.!?]['"]?)(\s|$)/g, 
                     '<span class="sentence">$1</span>$3');
        $(this).html(sentences);
    });

    $('.sentence').on('click', function() { 
        $('#result').text($(this).text()); 
    });