0

現在、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>

目標: 「keypress」タブ イベントで、{{ }} 内の各単語を強調表示します。すなわち 1. タブを 1 回押すと、{{name}} が強調表示されます。2. 2 回目にタブを押すと、{{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日間費やしてきました。以下は、私が見たものの参考文献です。

4

1 に答える 1

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 ループは、すべての一致を繰り返します。

一致を保存し、インデックスと長さの値を使用して 1 つずつ選択します。

もう一度編集します。おそらく経験があると思いますが、javascript でテキストを選択するのは最も簡単な作業ではありませんが、完全に実行可能です。

正しい結果を得るために使用した手法を示すために、小さな JSFiddle をまとめました。ここで見つけることができます。私はそれが少し明確であることを望み、私はそれをうまくコメントしようとしました.

もちろん、気になることがあれば何でも聞いてください！

乾杯！

于 2014-03-24T23:03:08.723 に答える