Zen coding: ability to climb DOM tree with ^

I developed a great zen coding project with the idea of ​​implementing a DOM ascension with ^ - so you can do:

html>head>title^body>h1 , not html>(head>title)+body>h1

I originally implemented with a rather crappy regular method. I have now implemented with @Jordan a great answer. Here you will find

What i still want to know

Are there any scenarios when my function returns the wrong value?

+7
source share
2 answers

Disclaimer: I never used Zen encoding, and this is just my second hearing about it, so I have no idea what the likely errors are. However, this seems like a working solution, or at least very close to one.

I am using Zen Coding for textarea v0.7.1 for this. If you use a different version of the code base, you need to adapt these instructions accordingly.

Several commentators have suggested that this is not a regular expression job, and I agree. Fortunately, zen coding has its own parser implementation, and it is very easy to build! There are two places where you need to add code to make this work:

  • Add the ^ character to the special_chars variable in the isAllowedChar function (line 1694 begins):

     function isAllowedChar(ch) { ... special_chars = '#.>+*: $-_!@ []()|^'; // Added ascension operator "^" 
  • Refer to the new statement in the switch the parse function (line 1541 begins):

     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; 

    Here is a breakdown of what the new code does:

     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; 

The execution above works as expected, for example:

 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 

You will undoubtedly want to try more complex, real test cases. Here is my modified source if you want to start a hit; replace zen_textarea.min.js with this for quick and dirty testing.

Please note that this simply goes up the DOM two levels and does not treat the previous elements as a group, for example, div>div^*3 will not work like (div>div)*3 . If this is what you need, then look at the logic for the closing parenthesis character, which uses lookups to check for multiplication. (Personally, I propose not to do this, because even for shorthand syntax it is terribly unreadable.)

+4
source

You should look for Perl Text :: Balanced an alternative language that you use.

-one
source

All Articles