Is javascript's window.getSelection() function unreliable?

Question

I put some text in an article tag, which itself is within a div tag. Then I created an event that is supposed to be called whenever the mouse is released. That event does a very simple action - it calls window.getSelection to find out what text was highlighted by the user, and it shows it with an alert.

Here's my code, which works 90% of the time (also available on jsfiddle):

function winsel() {
    var sel = window.getSelection();
    alert(sel);
}
$(document).ready(function() {
    $("#ArticleToHighlightRFS").bind("mouseup", winsel);
})

#scrollDiv {
    word-wrap: break-word;
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    height: 700px;
    max-height: 700px;
    min-height: 700px;
    overflow-y: scroll;
    border: 2px solid red;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
    <div id="scrollDiv">
        <article id="ArticleToHighlightRFS">

While awaiting execution, Bonhoeffer recorded a number of his thoughts in a work we now know as Letters and Papers 
from Prison. One of these essays, entitled On Stupidity, records some of the problems which Bonhoeffer likely saw at work 
in Hitler’s rise to power:


“Upon closer observation, it becomes apparent that every strong upsurge of power in the public sphere, be it of a political 
or a religious nature, infects a large part of humankind with stupidity. … The power of the one needs the stupidity of the other. 
The process at work here is not that particular human capacities, for instance, the intellect, suddenly atrophy or fail. Instead, 
it seems that under the overwhelming impact of rising power, humans are deprived of their inner independence and, more or less consciously, 
give up establishing an autonomous position toward the emerging circumstances. The fact that the stupid person is often stubborn must not 
blind us to the fact that he is not independent. In conversation with him, one virtually feels that one is dealing not at all with him as a 
person, but with slogans, catchwords, and the like that have taken possession of him. He is under a spell, blinded, misused, and abused 
in his very being. Having thus become a mindless tool, the stupid person will also be capable of any evil and at the same time incapable of seeing that it is evil. This is where the danger of diabolical misuse lurks, for it is this that can once and for all destroy human beings.”

        </article>
    </div>
</center>

The few times that do not work is the cause of the question. If you go to the jsfiddle page and run the code, you will see a box with text in it. The first word is "While". I highlight that by starting at the white-space after the 'e' and selecting all the way backwards, to the border of the box. When I'm lucky, the alert box pops up with the word WHILE in it. When I'm unlucky, nothing happens at all. I tried the JavaScript console to see if any error was reported, but none was reported.
If you wish to duplicate the problem, do this:

1. Highlight "while" and wait for the alert.

2. highlight some other word, preferably in the middle of a line and wait for the alert.

3. Highlight "while" again. Hopefully doing this a couple of times will show you the problem - the alert for 'while' will not come up.

(I'm using Chrome on Windows 10).

Answer 1

The answer is likely no, at least in the context of your post. Some JS methods are unreliable across multiple browsers/devices/versions (do to different implementation details), rarely is a method unreliable within the same browser/device/version.

With that said, the issue is probably present in other areas of your code, and this can be proven quite easily in this situation — the alert method has no issues with "falsy" values and would pop up regardless of whether or not the output of window.getSelection is valid. The only way it wouldn't, is if the window.getSelection call produced a fatal error, which we have verified that it doesn't. Finally, according to your description, the heart of the issue is "alert for 'while' will not come up" and this is telling.

Being that I haven't been able to reproduce your issue and being that the "while" word used in your tests is suspicious close to the border of the #ArticleToHighlightRFS div, I'm inclined to agree with the comments above and theorize that "sometimes" you are releasing the mouse outside of the #ArticleToHighlightRFS div, therefore not triggering the #ArticleToHighlightRFS on mouseup event, therefore not triggering its callback, and therefore not triggering the alert call.

Assuming this is the case, you could remedy the issue by also listening to the body element for a mouseup event, but only act on it if there has been a mousedown event on the desired #ArticleToHighlightRFS div prior. The implementation would be something along the lines of:

$(document).ready(function() {
  var $body = $('body')
  var $articleToHighlightRFS = $('#ArticleToHighlightRFS')
  var winsel = function () {
      $body.off('mouseup', winsel);
      var sel = window.getSelection();
      alert(sel);
  }
  $articleToHighlightRFS.on('mouseup', winsel);
  $articleToHighlightRFS.on('mousedown', function () {
    $body.one('mouseup', winsel);
  });
})

body { padding: 30px; background: blue }
#scrollDiv {
    background: white;
    word-wrap: break-word;
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    height: 700px;
    max-height: 700px;
    min-height: 700px;
    overflow-y: scroll;
    border: 2px solid red;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body element is all the blue
</br>
</br>
<center>
    <div id="scrollDiv">
        <article id="ArticleToHighlightRFS">

While awaiting execution, Bonhoeffer recorded a number of his thoughts in a work we now know as Letters and Papers 
from Prison. One of these essays, entitled On Stupidity, records some of the problems which Bonhoeffer likely saw at work 
in Hitler’s rise to power:


“Upon closer observation, it becomes apparent that every strong upsurge of power in the public sphere, be it of a political 
or a religious nature, infects a large part of humankind with stupidity. … The power of the one needs the stupidity of the other. 
The process at work here is not that particular human capacities, for instance, the intellect, suddenly atrophy or fail. Instead, 
it seems that under the overwhelming impact of rising power, humans are deprived of their inner independence and, more or less consciously, 
give up establishing an autonomous position toward the emerging circumstances. The fact that the stupid person is often stubborn must not 
blind us to the fact that he is not independent. In conversation with him, one virtually feels that one is dealing not at all with him as a 
person, but with slogans, catchwords, and the like that have taken possession of him. He is under a spell, blinded, misused, and abused 
in his very being. Having thus become a mindless tool, the stupid person will also be capable of any evil and at the same time incapable of seeing that it is evil. This is where the danger of diabolical misuse lurks, for it is this that can once and for all destroy human beings.”

        </article>
    </div>
</center>

I hope that helps!