How to find the selection text beginning and end positions in Javascript?

Question

I am trying to find the textual start and end of the selection. So, in the following text, if I selected "world! What a fine" from within "Hello, world! What a fine day it is!", I should get 7 as the start coordinate, and 24 as the end coordinate assuming a zero based index.

How is this achievable?

EDIT: I am looking to find the selection of text that is not inside any <input> or <textarea> elements.

EDIT: Decided the solution to use disabled <textarea>s

Answer 1

I use this:

/* Returns 3 strings, the part before the selection, the part after the selection and the selected part */
function getSelected()
{
  var u     = editor.val();
  var start = editor.get(0).selectionStart;
  var end   = editor.get(0).selectionEnd;

  return [u.substring(0, start), u.substring(end), u.substring(start, end)];
}

where editor is $("#editor") or whatever ID your textarea / input field may have.

Usage:

var select = getSelected()
editor.val(select[0] + '<h1>'+ select[2] + '</h1>' + select[1]);

Will wrap selected text in H1. If nothing is selected it will just add empty H1, but you can add checks and functionality to your liking.

** Not tested in all browsers, works in Chrome though **

Answer 2

This is possible but slightly complicated with contenteditable HTML content (as opposed to text within an <input> or <textarea> element). Here's a simple cross-browser implementation:

https://stackoverflow.com/a/4812022/96100

Answer 3

But I know a jQuery plugin that aims your problem and much more - https://github.com/localhost/jquery-fieldselection