how to get span selected portion using Javascript

Question

Hi guys

is there a way to get the highlighted selectionstart and selectedlenght on a span ?

Thanks

Answer 1

You might find some answers in this quirksmode post:

Answer 2

Have a try on this:

  var span = document.getElementById('span1');
  if (document.selection) { //IE
      var bm = document.selection.createRange().getBookmark();
      var sel = span.createTextRange();
      sel.moveToBookmark(bm);

      var sleft = span.createTextRange();
      sleft.collapse(true);
      sleft.setEndPoint("EndToStart", sel);
      span.selectionStart = sleft.text.length
      span.selectionEnd = sleft.text.length + sel.text.length;
      span.selectedText = sel.text;
  }
  else if (span.selectionStart){ //FF
     span.selectedText = span.substring(span.selectionStart,span.selectionEnd);
  }

  alert("Selection Start==> " + span.selectionStart + "\n" +
     "Selection End  ==> " + span.selectionEnd + "\n" +
     "Selected Text  ==> " + span.selectedText + "\n" +
     "TextArea Value ==> " + span.value);

Answer 3

I use my own optimization of the algorithms in IERange, which provides a wrapper around IE's TextRange (which is what you get from the selection in IE) to give them the same interface as DOM Ranges.

To get the selection in the document, use something like the following:

var sel = window.getSelection(); // Provided by IERange in IE, built-in in other browsers
var range = sel.getRangeAt(0); // Note this doesn't work in Safari 2

range now has properties startContainer and startOffset, which are respectively a reference to a node and an offset within that node that represent the start of the selection, and corresponding properties endContainer and endOffset that represent the end of the selection.