Question

我目前正在使用html5文本编辑器（bootstrap-wysihtml5）。我试图使用＆＃34;按键＆＃34; event（在选项卡上）选择文本编辑器中的特定单词。

以下是我的文字示例：

<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>

目标：on＆＃39; keypress＆＃39;标签事件，突出显示{{}}中的每个字词。即 1.按Tab键一次，将突出显示{{name}}。 2.第二次按Tab键，将突出显示{{在Rails中编程}}，＆amp;等等。

这是我到目前为止实施的内容：

$('#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天的时间来寻找如何使这项工作。以下是我所看到的参考文献：

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放在一起来演示我用来获得正确结果的技术。你可以找到它here。我希望它有点清楚，我试着好好评论它。

当然，如果您有任何疑问，请询问！

干杯！

jQuery在tab事件的文本编辑器中选择文本（在div标签内）

1 个答案: