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.
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 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.