javascript - zen-coding：使用 ^ 提升 DOM 树的能力

Question

我分叉了优秀的 zen-coding 项目，想法是使用 ^ 实现 DOM 提升 - 所以你可以这样做：

html>head>title^body>h1 而不是 html>(head>title)+body>h1

最初我用相当粗制滥造的正则表达式方法实现。我现在已经使用@Jordan 的出色答案实现了。我的叉子在这里

我还想知道什么

是否存在我的函数返回错误值的情况？

Answer 1

免责声明：我从未使用过 zen-coding，这只是我第二次听说它，所以我不知道可能的问题是什么。也就是说，这似乎是一个可行的解决方案，或者至少非常接近。

为此，我正在使用Zen Coding for textarea v0.7.1。如果您使用的是不同版本的代码库，则需要相应地调整这些说明。

一些评论者建议这不是正则表达式的工作，我同意。幸运的是，zen-coding 有自己的解析器实现，而且非常容易构建！您需要在两个地方添加代码才能使其正常工作：

1. 将^字符添加到函数中的special_chars变量isAllowedChar（大约从第 1694 行开始）：

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

2. switch处理函数语句中的新运算符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

您无疑会想尝试一些更高级的、真实的测试用例。如果您想要启动，这是我修改后的源代码；用这个替换你zen_textarea.min.js的一些快速和肮脏的测试。

请注意，这只是将 DOM 提升了两个级别，并且不会将前面的元素视为一个组，因此 egdiv>div^*3不会像(div>div)*3. 如果这是您想要的，请查看右括号字符的逻辑，它使用前瞻来检查乘法。（就个人而言，我建议不要这样做，因为即使是缩写语法，它也非常难以阅读。）

Answer 2

您应该在您使用的语言中寻找 Perl 的Text::Balanced替代方案。