javascript - zen-coding: ^ を使用して DOM ツリーを上る機能

Question

^ を使用して DOM アセンションを実装するというアイデアで、優れた zen-coding プロジェクトをフォークしました。

html>head>title^body>h1 それよりも html>(head>title)+body>h1

最初は、かなり見掛け倒しの正規表現メソッドで実装しました。@Jordanの優れた回答を使用して実装しました。私のフォークはここにあります

今でも知りたいこと

関数が間違った値を返すシナリオはありますか?

Answer 1

免責事項:私は zen コーディングを使用したことがなく、それについて聞いたのはこれが 2 回目なので、何が問題なのかわかりません。とはいえ、これは実用的な解決策であるか、少なくともそれに非常に近いようです。

これには、Zen Coding for textarea v0.7.1を使用しています。別のバージョンのコードベースを使用している場合は、これらの手順を適宜変更する必要があります。

何人かのコメントで、これは正規表現の仕事ではないという意見がありましたが、私も同意します。幸いなことに、zen-coding には独自のパーサーが実装されており、その上に構築するのは非常に簡単です。これを機能させるためにコードを追加する必要がある場所が 2 つあります。

1. 関数内の変数に^文字を追加します (1694 行目あたりから始まります)。special_charsisAllowedChar

   function isAllowedChar(ch) {
       ...
       special_chars = '#.>+*:$-_!@[]()|^'; // Added ascension operator "^"
   

2. switch関数のステートメントでnew 演算子を処理しparseます (1541 行目あたりから始まります)。

   parse: function(abbr) {
       ...
       while (i < il) {
           ch = abbr.charAt(i);
           prev_ch = i ? abbr.charAt(i - 1) : '';
           switch (ch) {
               ...
               // YOUR CODE BELOW
               case '^': // Ascension operator
                   if (!text_lvl && !attr_lvl) {
                       dumpToken();
                       context = context.parent.parent.addChild();
                   } else {
                       token += ch;
                   }
                   break;
   

   新しいコードの機能を行ごとに説明すると、次のようになります。

   case '^':                         // Current character is ascension operator.
       if (!text_lvl && !attr_lvl) { // Don't apply in text/attributes.
           dumpToken();              // Operator signifies end of current token.
   
                                     // Shift context up two levels.
           context = context.parent.parent.addChild();
   
       } else {
           token += ch;              // Add char to token in text/attribute.
       }
       break;
   

上記の実装は、たとえば次の場合に期待どおりに機能します。

html>head>title^body
html:5>div#first>div.inner^div#second>div.inner
html:5>div>(div>div>div^div)^div*2
html:5>div>div>div^^div

より高度な実世界のテスト ケースを試してみたいと思うことは間違いありません。キックスタートが必要な場合は、これが私の変更されたソースです。your を this に置き換えてzen_textarea.min.js、簡単なテストを行います。

これは DOM を 2 レベル上げるだけで、前の要素をグループとして扱わないことに注意してください。たとえば、 のようには機能しdiv>div^*3ません(div>div)*3。これが必要な場合は、先読みを使用して乗算をチェックする閉じ括弧文字のロジックを見てください。(個人的には、省略された構文であっても恐ろしく読めないので、これをしないことをお勧めします。)

Answer 2

使用している言語で Perl のText::Balanced代替を探す必要があります。