Selection.js

Selection.js provides a clean API to access selection. It is powerful and easy to use. It helps developers to deal with editor or something like that.

Selection in textarea or input

The basic syntax:

• create a selection.

  var sel = selection(document.getElementById('#textarea'));
  var sel = selection(document.getElementsByTagName('textarea'));
  var sel = selection($('textarea'));  // jQuery or zepto is accepted too
  

• get current cursor position, return [start, end]

  sel.cursor();
  

• set cursor position (or select text)

  sel.cursor(1);
  sel.cursor(1, 4);
  sel.cursor([1, 4]);
  

• get current selected text

  sel.text();
  

• replace current selected text

  // will select replaced text
  // word ... [replaced text] word ...
  sel.text('replaced text');
  
  // cursor will be at the left of the replaced text
  // word ... |replaced text word ...
  sel.text('replaced text', 'left');
  
  // curosr will be at the right of the replaced text
  // word ... replaced text| word ...
  sel.text('replaced text', 'right');
  

• insert text after current selection

  sel.append('append text');
  sel.append('append text', 'left');
  sel.append('append text', 'right');
  

• insert text before current selection

  sel.prepend('prepend text');
  sel.prepend('prepend text', 'left');
  sel.prepend('prepend text', 'right');
  

• get current line text

  sel.line()
  

• get surround word

  sel.surround();
  sel.surround(3);   // get surroud 3 characters.
  

• actions in a chain

  sel.cursor(1, 4).text('replaced text').prepend('prepend text').append('append text');
  

Selection on document

Selection on document is much more complex. Should it support selection on document?

• selection in the same element

  This is similar to selection in textarea, it is easy to implement this feature.

• selection has an element in it

  this is a [selected <em>TEST</em> text] for explain
  

  assume that we have selected selected <em>TEST</em> text , this is much more complex, but we can handle it.

• selection between elements

  <div>this is a [selection </div><p>between different] elements</p>
  

  assume that we have selected selection <div><p> between different, it is even more complex.

• selection with a large area

  What if we select a very large area, it has elements in it, it is between two elements.