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 `foo`, `bar`, or `baz`. 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;
}
span:hover {
    background: yellow;
}
div {
    color:red;
}

JavaScript

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

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