javascript - How can I get the word that the caret is upon inside a contenteditable div? -

-

i trying extract single word content editable div @ position, when mouse clicked. example:

lorem ipsum dolor sit amet, cons|ectetur adipiscing elit. cras vestibulum gravida tincidunt. proin justo dolor, iaculis vulputate eleifend et, facilisis eu erat.*

using | represent caret, function should return "consectetur".

my attempt:

window.onload = function () {         document.getelementbyid("text-editor").onclick = function () {             var caretpos = 0, containerel = null, sel, range;             if (window.getselection) {                 sel = window.getselection();                 if (sel.rangecount) {                     range = sel.getrangeat(0);                     if (range.commonancestorcontainer.parentnode == this) {                         caretpos = range.endoffset;                     }                 }             } else if (document.selection && document.selection.createrange) {                 range = document.selection.createrange();                 if (range.parentelement() == this) {                     var tempel = document.createelement("span");                     this.insertbefore(tempel, this.firstchild);                     var temprange = range.duplicate();                     temprange.movetoelementtext(tempel);                     temprange.setendpoint("endtoend", range);                     caretpos = temprange.text.length;                 }             }             var prevspace, nextspace, text = this.innertext;              prevspace = text.substring(0,caretpos).lastindexof(" ");             nextspace = text.indexof(" ", caretpos + 1);             nextspace == -1 ? nextspace = text.length - 1 : false;             prevspace++;             console.log([prevspace,caretpos,nextspace].join("|"));             var word = text.substring(prevspace, nextspace);             //removes punctuation , whitespace.             var patt = new regexp("([a-za-z0-9']*)","g");             word = patt.exec(word)[0];             document.getelementbyid("current-word").innerhtml = word;         };     };

a function bound mouse click event of contenteditable div, calculates caret position , finds indexes of preceding , following space characters (or beginning or end of string altogether) , uses substring determine word. there quick regex match remove punctuation , whitespace , end correct word.

this worked fine, when there single text node inside contenteditable div, started dropping , other assorted tags, part of method calculated caret position stopped working, calculating 0. there way calculate caret position in html did text?

if not, can suggest alternate method?

you use new textrange module of rangy library this, although it's enormous overkill 1 feature. here's code you'd need:

var sel = rangy.getselection(); sel.expand("word"); var word = sel.text(); alert(word);

otherwise, if can live no support pre-blink opera (up , including version 12) , firefox < 4, use selection.modify() (webkit, firefox) , expand() method of textrange (ie). here's example.

demo: http://jsfiddle.net/timdown/dbghn/1/

code:

function getword() {     var sel, word = "";     if (window.getselection && (sel = window.getselection()).modify) {         var selectedrange = sel.getrangeat(0);         sel.collapsetostart();         sel.modify("move", "backward", "word");         sel.modify("extend", "forward", "word");          word = sel.tostring();          // restore selection         sel.removeallranges();         sel.addrange(selectedrange);     } else if ( (sel = document.selection) && sel.type != "control") {         var range = sel.createrange();         range.collapse(true);         range.expand("word");         word = range.text;     }     alert(word); }

Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more