JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main1"> <span class="username">Username_1</span>
white some text content inside div... blue some text content inside div... yellow some text content inside div...</div>
<div id="main2"> <span class="username">Username_2</span>
another test1 text content inside div... another test2 text content inside div... another text test3 content inside div...</div>
<button onclick="saveUser()">Save</button>

JavaScript

function saveUser() {

        var userSelection = window.getSelection();

        if (userSelection != "") {
            var parent = getSelectionParentElement(userSelection);

            if (parent.innerHTML != "Save") {
                var tmp = parent.getElementsByTagName("span");

                alert(tmp[0].innerHTML);
            }
        }
    }

    function getSelectionParentElement(selectionUser) {
        // From http://stackoverflow.com/questions/7215479/get-parent-element-of-a-selected-text
        var parentEl = null,
            sel = null;
        if (selectionUser) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                parentEl = sel.getRangeAt(0).commonAncestorContainer;
                if (parentEl.nodeType != 1) {
                    parentEl = parentEl.parentNode;
                }
            }
        } else if ((sel = document.selection) && sel.type != "Control") {
            parentEl = sel.createRange().parentElement();
        }
        return parentEl;
    }