了解使用JavaScript选择文本区域的过程

Question

我正在使用中的浏览器内编辑器textarea。我已经开始寻找一些有关textarea选择的信息，并发现了这个jQuery插件fieldSelection可以进行一些简单的操作。

但是，它没有解释发生了什么。

我想更多地了解JavaScript中的文本区域选择，最好同时描述DOM3之前和DOM30之后的场景。

Answer 1

function get_selection(the_id){&nbsp; &nbsp; var e = document.getElementById(the_id);&nbsp; &nbsp; //Mozilla and DOM 3.0&nbsp; &nbsp; if('selectionStart' in e)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var l = e.selectionEnd - e.selectionStart;&nbsp; &nbsp; &nbsp; &nbsp; return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };&nbsp; &nbsp; }&nbsp; &nbsp; //IE&nbsp; &nbsp; else if(document.selection)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; e.focus();&nbsp; &nbsp; &nbsp; &nbsp; var r = document.selection.createRange();&nbsp; &nbsp; &nbsp; &nbsp; var tr = e.createTextRange();&nbsp; &nbsp; &nbsp; &nbsp; var tr2 = tr.duplicate();&nbsp; &nbsp; &nbsp; &nbsp; tr2.moveToBookmark(r.getBookmark());&nbsp; &nbsp; &nbsp; &nbsp; tr.setEndPoint('EndToStart',tr2);&nbsp; &nbsp; &nbsp; &nbsp; if (r == null || tr == null) return { start: e.value.length, end: e.value.length, length: 0, text: '' };&nbsp; &nbsp; &nbsp; &nbsp; var text_part = r.text.replace(/[\r\n]/g,'.'); //for some reason IE doesn't always count the \n and \r in the length&nbsp; &nbsp; &nbsp; &nbsp; var text_whole = e.value.replace(/[\r\n]/g,'.');&nbsp; &nbsp; &nbsp; &nbsp; var the_start = text_whole.indexOf(text_part,tr.text.length);&nbsp; &nbsp; &nbsp; &nbsp; return { start: the_start, end: the_start + text_part.length, length: text_part.length, text: r.text };&nbsp; &nbsp; }&nbsp; &nbsp; //Browser not supported&nbsp; &nbsp; else return { start: e.value.length, end: e.value.length, length: 0, text: '' };}function replace_selection(the_id,replace_str){&nbsp; &nbsp; var e = document.getElementById(the_id);&nbsp; &nbsp; selection = get_selection(the_id);&nbsp; &nbsp; var start_pos = selection.start;&nbsp; &nbsp; var end_pos = start_pos + replace_str.length;&nbsp; &nbsp; e.value = e.value.substr(0, start_pos) + replace_str + e.value.substr(selection.end, e.value.length);&nbsp; &nbsp; set_selection(the_id,start_pos,end_pos);&nbsp; &nbsp; return {start: start_pos, end: end_pos, length: replace_str.length, text: replace_str};}function set_selection(the_id,start_pos,end_pos){&nbsp; &nbsp; var e = document.getElementById(the_id);&nbsp; &nbsp; //Mozilla and DOM 3.0&nbsp; &nbsp; if('selectionStart' in e)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; e.focus();&nbsp; &nbsp; &nbsp; &nbsp; e.selectionStart = start_pos;&nbsp; &nbsp; &nbsp; &nbsp; e.selectionEnd = end_pos;&nbsp; &nbsp; }&nbsp; &nbsp; //IE&nbsp; &nbsp; else if(document.selection)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; e.focus();&nbsp; &nbsp; &nbsp; &nbsp; var tr = e.createTextRange();&nbsp; &nbsp; &nbsp; &nbsp; //Fix IE from counting the newline characters as two seperate characters&nbsp; &nbsp; &nbsp; &nbsp; var stop_it = start_pos;&nbsp; &nbsp; &nbsp; &nbsp; for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) start_pos = start_pos - .5;&nbsp; &nbsp; &nbsp; &nbsp; stop_it = end_pos;&nbsp; &nbsp; &nbsp; &nbsp; for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) end_pos = end_pos - .5;&nbsp; &nbsp; &nbsp; &nbsp; tr.moveEnd('textedit',-1);&nbsp; &nbsp; &nbsp; &nbsp; tr.moveStart('character',start_pos);&nbsp; &nbsp; &nbsp; &nbsp; tr.moveEnd('character',end_pos - start_pos);&nbsp; &nbsp; &nbsp; &nbsp; tr.select();&nbsp; &nbsp; }&nbsp; &nbsp; return get_selection(the_id);}function wrap_selection(the_id, left_str, right_str, sel_offset, sel_length){&nbsp; &nbsp; var the_sel_text = get_selection(the_id).text;&nbsp; &nbsp; var selection =&nbsp; replace_selection(the_id, left_str + the_sel_text + right_str );&nbsp; &nbsp; if(sel_offset !== undefined && sel_length !== undefined) selection = set_selection(the_id, selection.start +&nbsp; sel_offset, selection.start +&nbsp; sel_offset + sel_length);&nbsp; &nbsp; else if(the_sel_text == '') selection = set_selection(the_id, selection.start + left_str.length, selection.start + left_str.length);&nbsp; &nbsp; return selection;}

Answer 2

我刚刚采用了user357565提出的解决方案，并对jQuery直接使用进行了重新编码：(function ($) {&nbsp; $.fn.get_selection = function () {&nbsp; &nbsp; var e = this.get(0);&nbsp; &nbsp; //Mozilla and DOM 3.0&nbsp; &nbsp; if('selectionStart' in e) {&nbsp; &nbsp; &nbsp; var l = e.selectionEnd - e.selectionStart;&nbsp; &nbsp; &nbsp; return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };&nbsp; &nbsp; }&nbsp; &nbsp; else if(document.selection) {&nbsp; &nbsp; //IE&nbsp; &nbsp; &nbsp; e.focus();&nbsp; &nbsp; &nbsp; var r = document.selection.createRange();&nbsp; &nbsp; &nbsp; var tr = e.createTextRange();&nbsp; &nbsp; &nbsp; var tr2 = tr.duplicate();&nbsp; &nbsp; &nbsp; tr2.moveToBookmark(r.getBookmark());&nbsp; &nbsp; &nbsp; tr.setEndPoint('EndToStart',tr2);&nbsp; &nbsp; &nbsp; if (r == null || tr == null) return { start: e.value.length, end: e.value.length, length: 0, text: '' };&nbsp; &nbsp; &nbsp; var text_part = r.text.replace(/[\r\n]/g,'.'); //for some reason IE doesn't always count the \n and \r in length&nbsp; &nbsp; &nbsp; var text_whole = e.value.replace(/[\r\n]/g,'.');&nbsp; &nbsp; &nbsp; var the_start = text_whole.indexOf(text_part,tr.text.length);&nbsp; &nbsp; &nbsp; return { start: the_start, end: the_start + text_part.length, length: text_part.length, text: r.text };&nbsp; &nbsp; }&nbsp; &nbsp; //Browser not supported&nbsp; &nbsp; else return { start: e.value.length, end: e.value.length, length: 0, text: '' };&nbsp; };&nbsp; $.fn.set_selection = function (start_pos,end_pos) {&nbsp; &nbsp; var e = this.get(0);&nbsp; &nbsp; //Mozilla and DOM 3.0&nbsp; &nbsp; if('selectionStart' in e) {&nbsp; &nbsp; &nbsp; e.focus();&nbsp; &nbsp; &nbsp; e.selectionStart = start_pos;&nbsp; &nbsp; &nbsp; e.selectionEnd = end_pos;&nbsp; &nbsp; }&nbsp; &nbsp; else if (document.selection) { //IE&nbsp; &nbsp; &nbsp; e.focus();&nbsp; &nbsp; &nbsp; var tr = e.createTextRange();&nbsp; &nbsp; &nbsp; //Fix IE from counting the newline characters as two seperate characters&nbsp; &nbsp; &nbsp; var stop_it = start_pos;&nbsp; &nbsp; &nbsp; for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) start_pos = start_pos - .5;&nbsp; &nbsp; &nbsp; stop_it = end_pos;&nbsp; &nbsp; &nbsp; for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) end_pos = end_pos - .5;&nbsp; &nbsp; &nbsp; tr.moveEnd('textedit',-1);&nbsp; &nbsp; &nbsp; tr.moveStart('character',start_pos);&nbsp; &nbsp; &nbsp; tr.moveEnd('character',end_pos - start_pos);&nbsp; &nbsp; &nbsp; tr.select();&nbsp; &nbsp; }&nbsp; &nbsp; return this.get_selection();&nbsp; };&nbsp; $.fn.replace_selection = function (replace_str) {&nbsp; &nbsp; var e = this.get(0);&nbsp; &nbsp; selection = this.get_selection();&nbsp; &nbsp; var start_pos = selection.start;&nbsp; &nbsp; var end_pos = start_pos + replace_str.length;&nbsp; &nbsp; e.value = e.value.substr(0, start_pos) + replace_str + e.value.substr(selection.end, e.value.length);&nbsp; &nbsp; this.set_selection(start_pos,end_pos);&nbsp; &nbsp; return {start: start_pos, end: end_pos, length: replace_str.length, text: replace_str};&nbsp; };&nbsp; $.fn.wrap_selection = function (left_str, right_str, sel_offset, sel_length) {&nbsp; &nbsp; var the_sel_text = this.get_selection().text;&nbsp; &nbsp; var selection =&nbsp; this.replace_selection(left_str + the_sel_text + right_str );&nbsp; &nbsp; if(sel_offset !== undefined && sel_length !== undefined)&nbsp;&nbsp; &nbsp; &nbsp; selection = this.set_selection(selection.start +&nbsp; sel_offset, selection.start +&nbsp; sel_offset + sel_length);&nbsp; &nbsp; else if(the_sel_text == '')&nbsp;&nbsp; &nbsp; &nbsp; selection = this.set_selection(selection.start + left_str.length, selection.start + left_str.length);&nbsp; &nbsp; return selection;&nbsp; };}(jQuery));我希望有人觉得它有用！