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

Posted 2023-02-21

【中文标题】zen-coding：使用 ^ 提升 DOM 树的能力

【英文标题】：zen-coding: ability to ascend the DOM tree using ^

【发布时间】：2011-07-27 15:27:07

【问题描述】：

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

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

最初我用相当粗劣的正则表达式方法实现。我现在已经使用@Jordan 的出色答案实现了。我的fork is here

我还想知道什么

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

【问题讨论】：

这看起来不像你可以用一个正则表达式来做的事情。我会弄清楚你的语法到底是什么，然后为它写一个真正的解析器。

我认为它已经有一个非常好的标记解析器——只是我不知道它是如何工作的。我希望有人可以提供帮助。

@tchrist 将能够为此编写一个正则表达式...

这属于Code Review。

如果问题是关于代码审查的，那么@Jordan 就不会看到它，也无法给出他出色而有用的答案！

【参考方案1】：

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

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

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

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

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

在parse 函数的switch 语句中处理新的运算符（大约从第 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

您无疑会想尝试一些更高级的真实测试用例。 Here's my modified source 如果您想快速启动；用这个替换你的zen_textarea.min.js 进行一些快速而肮脏的测试。

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

【讨论】：

我都测试过了，效果很好。这对我来说也是一个关于解析器如何工作的教育（我还有很多东西要学）。你真的让问题看起来很简单。谢谢。我也同意 div>div^*3 的语法令人困惑，我真的没有看到任何好处。

谢谢@Billy！乐意效劳。如果您真的想了解正在发生的事情，expandAbbreviation 方法似乎是一个不错的起点；听从那里的电话，您将参观大部分重要的东西。 :)

【参考方案2】：

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