4umi.com/web/javascript/select

Selected elements

Text Javascript

The various browsers have very different ways of dealing with the selection or highlighting of text and other material on a page. For the creation and control of such ranges, Internet Explorer hooks directly into the same process that empowers all Windows products, indeed Windows itself, and has offered a rich palette of commands since version 4. It even provides access to the clipboard where all copied items are stored. Other browsers are catching up.

A live example

In the beginning was the <table>, and the table had three rows, and all four had a unique id assigned to them. The table was in <fieldset> tags, and the fieldset was followed by a <script>, which dynamically added <input> and <select> elements if it found the browser capable of performing their function of highlighting the correct lines.

Sample text
in principio erat verbum,
et verbum erat apud deum,
et deus erat verbum

The code caters for the widest possible range of browsers, in reasonability, so if you do not see the magic button above this line by now, you probably have Javascript disabled in your browser.

The script

The code is based on this post by Yann-Erwan Perio in the comp.lang.javascript newsgroup.

var Utils = {
  NOT_SUPPORTED : {},
  DOM : {
    getElementWithId : function() {
      var func = function() { return Utils.NOT_SUPPORTED; }
      if(document.getElementById) {
        func = function(id) {
          return document.getElementById(id);
        }
      } else if(document.all) {
        func = function(id) {
          return document.all[id];
        }
      }
      return ( this.getElementWithId = func )();
    }
  },
  Ranges : {
    create : function() {
      var func = function() { return Utils.NOT_SUPPORTED };
      if(document.body && document.body.createTextRange) {
        func = function() { return document.body.createTextRange(); }
      } else if(document.createRange) {
        func = function() { return document.createRange(); }
      }
      return (this.create = func)();
    },
    selectNode : function(node, originalRng) {
      var func = function() { return Utils.NOT_SUPPORTED; };
      var rng = this.create(), method = '';
      if(rng.moveToElementText) { method = 'moveToElementText'; }
      else if(rng.selectNode) { method = 'selectNode'; }
      if(method)
        func = function(node, rng) {
          rng = rng || Utils.Ranges.create();
          rng[method](node);
          return rng;
        }
      return rng = null, (this.selectNode = func)(node, originalRng);
    }
  },
  Selection : {
    clear:function() {
      var func = function() { return Utils.NOT_SUPPORTED };
      if( typeof document.selection !== 'undefined' ) {
        func = function() {
          if(document.selection && document.selection.empty) {
            return (Utils.Selection.clear = function() {
              if(document.selection) { document.selection.empty(); }
            })();
          }
        }
      } else if(window.getSelection) {
        var sel = window.getSelection();
        if(sel.removeAllRanges) {
          func = function() {
            window.getSelection().removeAllRanges();
          }
        }
        sel = null;
      }
      return (this.clear = func)();
    },
    add : function(originalRng) {
      var func = function() { return Utils.NOT_SUPPORTED };
      var rng = Utils.Ranges.create();
      if(rng.select) {
        func = function(rng) { rng.select(); }
      } else if(window.getSelection) {
        var sel = window.getSelection();
        if(sel.addRange) {
          func = function(rng) { window.getSelection().addRange(rng); }
        }
        sel = null;
      }
      return (this.add = func) ( originalRng );
    }
  }
};
(function() {
  var rng = Utils.Ranges.create();
  var ele = Utils.DOM.getElementWithId( 'myID' );
  if(rng !== Utils.NOT_SUPPORTED && ele !== Utils.NOT_SUPPORTED) {
    document.write(
      '<form>' +
      '<input type="button" class="key" value="Select" onclick="'+
        'Utils.Selection.clear();' +
        'Utils.Selection.add(' +
          'Utils.Ranges.selectNode(' +
            'Utils.DOM.getElementWithId( this.form.ids.options[this.form.ids.selectedIndex].value )'+
          ')' +
        ')' +
      '">&nbsp;' +
      '<select name="ids">' +
      '<option value="line1" selected="selected">line 1</option>' +
      '<option value="line2">line 2</option>' +
      '<option value="line3">line 3</option>' +
      '<option value="lines">all 3</option>' +
      '<option value="sam">the code</option>' +
      '<option value="body">the page</option>' +
      '<\/select>' +
      '<\/form>'
    );
  }
})();

Reference