javascript - jQuery to select text (inside a div tag) within text editor on tab event -

i using html5 text editor (bootstrap-wysihtml5). i'm trying use "keypress" event (on tab) select specific words within text editor.

here example of text:

<div>   name {{name}} , enjoy {{programming in rails}}. </div>  <div>   {{friend name}} suggested in touch {{catch up}}.    spoke {{highly}} , said should {{get sometime}}.  </div> 

goal: on 'keypress' tab event, highlight each word within {{ }}. i.e. 1. press tab once, highlight {{name}}. 2. press tab on 2nd time, highlight {{programming in rails}}, & on.

here have implemented far:

$('#wysihtml5').each(function(i, elem) {   $(elem).wysihtml5({     "font-styles": true,     "events": {       "focus": function() {         $('.wysihtml5-sandbox').contents().find('body').on("keydown",function(event) {                     event.preventdefault();             var numloops = _.size($(this).children());                       var keycode = event.keycode || event.which;                         if (keycode == 9){             // loop thru children divs              (var = 0; < numloops; i++) {               // array of matched items {{}}                  var sentence = $($(this).children()[i]).html();               var toswap = sentence.match(/\{{(.*?)\}}/g);               var numswap = _.size(toswap);               // need figure out: how select matched item..and move next 1 on tab                        }                                    }              });                                      }     }    });  });  

any thoughts? i've been spending 2 days on finding how make work. following references have looked at:

• jquery set cursor position in text area
• selecting text in element (akin highlighting mouse)
• javascript regex replace html chars
• what text node, uses? //document.createtextnode()

what want index of regex matches.

if perform regex follows:

var reg = /\{{(.*?)\}}/g; // regex selector  while(match=reg.exec(sentence)) { // iterate matched strings      // match.index gives starting position of matched string     // match.length gives length of matched string, number of characters  } 

you position , length of matches can used selection. while loop iterates matches.

save matches , user index , length values select them 1 one.

edit again. have experienced, selecting text in javascript not easiest task doable.

i put small jsfiddle demonstrate technique used correct result. can find here. hope it's kind of clear , tried comment well.

of course, if have question, ask!

cheers!