JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span class="start">L</span>orem 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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<span class="end">.</span>
</p>
<p>
    <span class="start">L</span>orem 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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<span class="end">.</span>
</p>
<p>
    <span class="start">L</span>orem 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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<span class="end">.</span>
</p>

JavaScript

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

$(document).ready(function() {
    $(this).mouseup(function() {
        var selection = getSelectionHtml();
        var matches = null;
        var paragraphs = -1;
        var entireParagraph = false;
        if (selection != null && selection.length > 0) {
            matches = selection.match(/\<p[^\>]*\>/g);;
            paragraphs = (matches == null ? 0 : matches.length);
            if (selection.match(/^\<span class\=\"start\">/g) != null
                && selection.match(/\<span class\=\"end\">.*?\<\/span\>$/g) != null) {
                entireParagraph = true;
            }
        }
        if (paragraphs == 0) {
            if (entireParagraph) {
                alert("paragraph selected");
            } else {
                alert("inline text selected");
            }
        } else if (paragraphs > 0) {
            alert(paragraphs + " paragraphs selected");
        }
    });
});