Highlights are not captured correctly by JavaScript

Confirmed Issue #8862519 • Assigned to Travis L.


Gideon I.
Sep 12, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Make a webpage containing the following paragraph of HTML:
    <p id="RFSkid34_P"><span id="RFSkid35_SPAN" style="font-size: 14pt;">Is this really a matter of integrity?  Or is it hubris?</span></p>
    <div id="RFSkid62_DIV" class="field-tags"><span id="RFSkid63_SPAN" style="font-size: 14pt;"> <span id="RFSkid64_SPAN" class="field-label"> Tags: </span> <a id="RFSkid65_A" href="http://www.frontpagemag.com/tag/conservatives" target="_blank">Conservatives</a>, <a id="RFSkid66_A" href="http://www.frontpagemag.com/tag/donald-trump" target="_blank">Donald Trump</a>, <a id="RFSkid67_A" href="http://www.frontpagemag.com/tag/left" target="_blank">Left</a> </span></div>
  2. note that I’ve put a descriptive id in the various nodes. So if you print a node-tree of the above, where the deeper a node is nested, the more the next diagram indents it, then it looks like this:
    node tree representation:

level: 1   nodeName=#text and nodeValue=
level: 1   nodeName=P and nodeID=RFSkid34_P
level: 2     nodeName=SPAN and nodeID=RFSkid35_SPAN
level: 3       nodeName=#text and nodeValue=Is this really a matter of integrity?  Or is it hubris?
level: 1   nodeName=#text and nodeValue=
level: 1   nodeName=DIV and nodeID=RFSkid62_DIV
level: 2     nodeName=SPAN and nodeID=RFSkid63_SPAN
level: 3       nodeName=#text and nodeValue=
level: 3       nodeName=SPAN and nodeID=RFSkid64_SPAN
level: 4         nodeName=#text and nodeValue= Tags:
level: 3       nodeName=#text and nodeValue=
level: 3       nodeName=A and nodeID=RFSkid65_A
level: 4         nodeName=#text and nodeValue=Conservatives
level: 3       nodeName=#text and nodeValue=,
level: 3       nodeName=A and nodeID=RFSkid66_A
level: 4         nodeName=#text and nodeValue=Donald Trump
level: 3       nodeName=#text and nodeValue=,
level: 3       nodeName=A and nodeID=RFSkid67_A
level: 4         nodeName=#text and nodeValue=Left
level: 3       nodeName=#text and nodeValue=
level: 1   nodeName=#text and nodeValue=

So here is where things go wrong:
I highlight the words “Donald Trump,” (plus the blank spaces on each side of his name)

Then I capture in JavaScript, the anchor node and the focus node. (An anchor node is the node where the highlighting starts, and the focus node is the node where it ends. The nodes could be standard elements (such as DIV) or they could be "text nodes". If you have a long unformatted sentence, and you highlight 2 words in the middle of it, you hopefully get an anchor node and a focus node that are both of type text. In fact, they are the same node, just with different offsets.

So when I do the experiment with the sample above:
Microsoft Edge gives:
anchor Type 3 (text), Anchor Parent Id RFSkid63_SPAN, focus Type 1 ( element), focusId: RFSkid63_SPAN, focus Parent Id: RFSkid62_DIV

Google Chrome gives:
anchor Type 3 (text), Anchor Parent: RFSkid63_SPAN, focus Type 3 (element), focus Parent: RFSkid63_SPAN

Google is probably better, since it says both the anchor and the focus of “Donald Trump” is text. Edge decides the anchor is text, but the focus is an element.

I might be able to tweak my JavaScript to cope with the Edge approach, but I think you should look at this anyway.
Below is some JavaScript that might get you started:
var st = window.CurrentSelection; // or another statement, I just pasted this here for now

// get range that user highlighted and also the same range plus 2 characters, one at each end
if (isSelectionBackwards(st)) {
    preOffset = st.focusOffset;
    postOffset = st.anchorOffset;
    htmlplayer.rangeThatUserHighlighted.setStart(st.focusNode, preOffset);
    htmlplayer.rangeThatUserHighlighted.setEnd(st.anchorNode, postOffset);
    htmlplayer.anchorNodeOfSelection = st.focusNode;
    htmlplayer.focusNodeOfSelection = st.anchorNode;
    htmlplayer.anchorOffset = preOffset;
    htmlplayer.focusOffset = postOffset
    preOffset = preOffset - 1;
    if (preOffset < 0) {
        preOffset = st.focusOffset;
    postOffset = postOffset + 1;

else {
    preOffset = st.anchorOffset;
    postOffset = st.focusOffset;
    htmlplayer.rangeThatUserHighlighted.setStart(st.anchorNode, preOffset);
    htmlplayer.rangeThatUserHighlighted.setEnd(st.focusNode, postOffset);
    htmlplayer.anchorNodeOfSelection = st.anchorNode;
    htmlplayer.focusNodeOfSelection = st.focusNode;
    htmlplayer.anchorOffset = preOffset;
    htmlplayer.focusOffset = postOffset


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • One error: At the bottom of my post I give Google Chrome focus type of 3 as being an element. 3 means type 'text’, not an element node.

    • Before I submitted this here, I submitted an abbreviated version via the feedback link in Microsoft EDGE. That should be deleted before someone else works on it. Also, it may help to know that whenever a word is highlighted, the DOM (at least in EDGE) changes to make that word into its own text-node.

    • Microsoft Edge Team

      Changed Assigned To to “Travis L.”

      Changed Status to “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in