get selected text on button click using javascript?

Question

Basically I am trying to get selected text if a user click on a div.

Code:

$('.boldTextButton').mouseup(function(event){
    var SelectionDetails = getSelectionText();
    console.log(SelectionDetails);
});

function getSelectionText() {
    var text = "", startRange=0, endRange=0;
    if (window.getSelection) {
        text = window.getSelection().toString();
        startRange = window.getSelection().anchorOffset;
        endRange = window.getSelection().focusOffset;
    } else if (document.selection && document.selection.type != "Control"){
        text = document.selection.createRange().text;
    }

    return [text, endRange, startRange];
}

Unfortunately with above method, when the mouse is clicked, it first de-select the text and then the returned value I get is empty "".

I also have tried event.preventDefault() and event.stopPropegation(), still didn't work.

@turivishal, I want to get the selected text when someone click on a `div` container/button. — MorariJan, Jul 01 '20 at 05:18
does this answer your question https://stackoverflow.com/a/14553834/8987128 — turivishal, Jul 01 '20 at 05:34

Rush.2707 · Answer 1 · 2020-07-01T06:24:20.137

Based on my understanding of your question, I guess you want to show selected text on click of a button. So, simply save selection in a hiddenfield and show from there, this will work.

$('#btnSave').click(function(e){
console.log($("#hdnValue").val());
});

$('.boldTextButton').mouseup(function(event){
    var SelectionDetails = getSelectionText();
    $("#hdnValue").val(SelectionDetails);
});

function getSelectionText() {
    var text = "", startRange=0, endRange=0;
    if (window.getSelection) {
        text = window.getSelection().toString();
        startRange = window.getSelection().anchorOffset;
        endRange = window.getSelection().focusOffset;
    } else if (document.selection && document.selection.type != "Control"){
        text = document.selection.createRange().text;
    }

    return [text, endRange, startRange];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boldTextButton">
<h2>Sample text 1</h2>
<h2>Sample text 2</h2>
<h2>Sample text 3</h2>
<h2>Sample text 4</h2><h2>Sample text 5</h2>
<h2>Sample text 6</h2>
<h2>Sample text 7</h2><h2>Sample text 8</h2>
<h2>Sample text 9</h2>
<h2>Sample text 10</h2><h2>Sample text 11</h2>
</div>

<div class="btnText">
<input type="hidden" id="hdnValue" />
<input type="button" id="btnSave" value="show" />
</div>

I think above method will require alot of event handlings, such as if user used ctlr+a, shift+arrow and etc for selection and then use the show button for printing, do you know any easier method? — MorariJan, Jul 01 '20 at 17:58
NVM, declared a global variable to store the value, kinda dumb but that only work if you do the following: `let SelectionDetails = getSelectionText(); globalSelection = SelectionDetails;` and then on `show` button click, the selection is accessible. — MorariJan, Jul 01 '20 at 18:12
I used hidden field and that should allow getting selected text anytime. the hidden field will work as a global variable and it is a bit more trustable. — Rush.2707, Jul 03 '20 at 08:04

get selected text on button click using javascript?

1 Answers1