jQuery для выбора текста (внутри тега div) в текстовом редакторе на вкладке события

Question

В настоящее время я использую текстовый редактор html5 ( bootstrap-wysihtml5). Я пытаюсь использовать событие "нажатие клавиши" (на вкладке), чтобы выбрать конкретные слова в текстовом редакторе.

Вот пример моего текста:

<div>
  My name is {{name}} and I enjoy {{programming in Rails}}.
</div>

<div>
  {{Friend Name}} suggested that we get in touch to {{catch up}}. 
  He spoke {{highly}} about you and said that we should {{get together sometime}}. 
</div>

Цель: на вкладке "нажатие клавиши" выделите каждое слово в {{ }}. то есть 1. Нажмите Tab один раз, выделите {{name}}. 2. Нажмите tab во второй раз, выделите {{программирование в Rails}} и так далее.

Вот что я реализовал до сих пор:

$('#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 all children divs

            for (var i = 0; i < numLoops; i++) {
              // get array of all matched items {{}}  

              var sentence = $($(this).children()[i]).html();
              var toSwap = sentence.match(/\{{(.*?)\}}/g);
              var numSwap = _.size(toSwap);
              // NEED TO FIGURE OUT: How to select matched item..and move to the next one on tab           
            }                         
          }      
       });                               
      }
    } 
  }); 
}); 

Какие-нибудь мысли? Я потратил 2 дня, чтобы найти, как сделать эту работу. Ниже приведены ссылки на то, что я посмотрел:

• jQuery Установить положение курсора в текстовой области
• Выделение текста в элементе (сродни выделению мышью)
• регулярное выражение javascript заменяет символы html
• Что такое текстовый узел, его использование? //document.createTextNode ()

Answer 1

То, что вы хотите, это индекс совпадений регулярных выражений.

Если вы выполняете регулярное выражение следующим образом:

var reg = /\{{(.*?)\}}/g; // The Regex selector

while(match=reg.exec(sentence)) { // Iterate all the matched strings

    // match.index gives the starting position of the matched string
    // match.length gives the length of the matched string, number of characters

}

Вы получите позицию и длину всех матчей, которые могут быть использованы для выбора. Цикл while повторяет все совпадения.

Сохраните совпадения и используйте их значения индекса и длины, чтобы выбрать их одно за другим.

Отредактируйте Назад снова. Как вы, наверное, поняли, выбор текста в javascript - не самая простая задача, но она вполне выполнима.

Я собрал небольшой JSFiddle, чтобы продемонстрировать технику, которую я использовал, чтобы получить правильный результат. Вы можете найти это здесь. Надеюсь, это понятно, и я постарался хорошо это прокомментировать.

Конечно, если у вас есть какие-либо вопросы, просто спросите!

Ура!