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
Post a Comment