how to get span selected portion using Javascript

2.6k views Asked by At

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

Thanks

3

There are 3 answers

0
Tim Down On BEST ANSWER

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.

1
klaaspieter On

You might find some answers in this quirksmode post:

1
jerjer On

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);