javascript - Replace certain last words typed with html in contenteditable div -


i'm trying replace keywords in content-editable div hyper-links on fly user typing. have working great first word type first splitting entire string " ", grabbing recent word , if it's 1 of keywords, find start index , end index in entire string do:

range.setstart(mydiv.firstchild, startofwordindex); range.setend(mydiv.firstchild, endofwordindex); range.deletecontents(); range.insertnode(...); 

where node i'm inserting hyper-link i've created didn't type out here brevity's sake.

my problem is, after node inserted, can no longer use mydiv.firstchild in setstart() method because new have new nodes in front of user typing.

this first crack @ content-editable html i'm not sure how grab last node nor sure using start , end indices of word work there anyway since based on entire length of div contents.

any appreciated.

after sleep, got sorted out on own: heavily commented in case in can else.

function replacelastwordwithlink(editcontent) {     var selection, selectedrange, range, node, frag, el, selectiontext, wordstart, wordend, currentword;     // set selection     selection = window.getselection();     // set range cursor     selectedrange = selection.getrangeat(0);     // set "global" range     range = document.createrange();     // node contents of global range     range.selectnodecontents(editcontent);     // node cursor in     node = selectedrange.startcontainer;     // point global range node cusor in , start of 0     range.setstart(node, 0);     // point global range node cursor in , end of cursor     range.setend(node, selectedrange.startoffset);     // create fragment contents     frag = range.clonecontents();     // create pseudo element place fragment in     el = document.createelement("span");     // place fragment in pseudo element     el.appendchild(frag);     // text pseduo element     selectiontext = el.innertext;     // pattern see if there spaces     spacepattern = /\s/;     if (!spacepattern.test(selectiontext)) {         // no spaces start of word index @ 0         wordstart = 0;         // no spaces end of word index cusor (the total length of text)         wordend = selectiontext.length;     } else {         // split off last word in text         currentword = selectiontext.split(/\s/).reverse()[0].tolowercase();         // start of word's index in string         wordstart = selectiontext.lastindexof(currentword);         // end of word's index adding start of word index word length         wordend = wordstart + currentword.length;     }     // set range current word     range.setstart(node, wordstart);     range.setend(node, wordend);     // remove current word     range.deletecontents();     // replace word link     var el = document.createelement("a");     el.href = "http://www.yahoo.com";     el.text = selectedtext;     range.insertnode(el); } 

Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -