Home/ Questions/Q 788751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:25:02+00:00

A quick question: how do I programatically select the text fragment of the page

  • 0

A quick question: how do I programatically select the text fragment of the page in FireFox? For example, there’s a paragraph of text, user clicks the button and symbols from 10-th to 15-th are selected as if user dragged a mouse in a regular way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In Firefox, you can use the Range object, as specified by W3C.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">   
    <title>Range test</title>
    <style>   
        #trigger { background: lightgreen }
    </style>                 
  </head>                    
  <body>                     
    <p id="test">This is some (rather short) text.</p>
    <span id="trigger">→ Click here! ←</span>
      <!-- Yes, I know, ‘Click here!’ is an evil message -->
    <script>
var testCase = function () {
    var userSelection;

    if (window.getSelection) {  // W3C default
        userSelection = window.getSelection();
    }  // an extra branch would be necessary if you want to support IE

    var textNode = document.getElementById('test').firstChild;
    var theRange = document.createRange();

    // select 10th–15th character (counting starts at 0)
    theRange.setStart(textNode, 9);
    theRange.setEnd(textNode, 14);

    // set user selection    
    userSelection.addRange(theRange);
};

window.onload = function () {
    var el = document.getElementById('trigger');
    el.onclick = testCase;
};
    </script>
  </body>
</html>

    Note that you have to get the TextNode to set the selection, which is the firstChild of the <p> element. Also note that this example will not work in IE, you have to use some proprietary methods. A nice introduction is on QuirksMode.

    • 0