javascript - 从 CSS 选择器字符串中提取 HTML5 类的正则表达式

Question

我正在以字符串形式从磁盘读取 CSS 文件。

我的目标是提取与特定数据属性配对的 HTML 类，如下所示:

.foo[data-my-attr] 

数据属性足够独特，因此我不必费心遍历 CSS AST。我可以简单地使用这样的正则表达式:

(\.\S+)+\[data-my-attr\]

这已经可以工作了，但是 \S+ 显然是一种在选择器中匹配 HTML 类的糟糕方法。它将包括各种组合器、伪类、伪选择器等。

我尝试构建正则表达式的白名单版本，e。 G。 (\w|-)+，但是类名的 HTML5 规范非常宽松。我不可避免地会漏掉某些字符或包含不正确的字符。

什么正则表达式可用于从 CSS 选择器字符串中提取 HTML5 类？

我正在使用 Node，我。 e.正则表达式的 JavaScript 风格。

UPD1

一些例子:

• .foo[data-my-attr] -- 应该匹配 .foo
• .foo>span[data-my-attr] -- 不应该匹配
• .I_f%⌘ing_♥_HTML5[data-my-attr] -- 应该匹配 .I_f%⌘ing_♥_HTML5

存在这个问题是因为我想不出所有可能的有效 HTML5 类。我需要一个基于令人惊讶的模糊 HTML5 类规范的正则表达式:

3.2.5.7 The class attribute

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

很明显，一个类不应该包含空格和像 +>:()[]=~ 这样的字符，因为它们是 CSS 选择器语法的一部分......

Answer 1

你不应该使用正则表达式。

一个更可靠的替代方案是 PostCSS(及其解析器)。有了它，您将获得整个样式表的完整 AST(抽象语法树)，有了它，您将能够轻松提取您要查找的部分。

const postcss = require('postcss');
const Tokenizer = require('css-selector-tokenizer');

let output = [];

const postcssAttributes = postcss.plugin('postcss-attributes', function() {
  return function(css) {
    css.walkRules(function(rule) {
      rule.selectors.map(selector => {
        const tokenized = Tokenizer.parse(selector);
        if (
          tokenized.nodes.some(({ nodes }) =>
            nodes.some(
              node =>
                node.type === 'attribute' && node.content === 'data-my-attr'
            )
          )
        ) {
          output.push(selector);
        }
      });
    });
  };
});

const css = `
    .foo[data-my-attr] {
        color: red;
    }
    .foo[something] {
        color: red;
    }
`;

postcss([postcssAttributes])
  .process(css)
  .then(result => console.log(output));

// logs: [ '.foo[data-my-attr]' ]

这将记录所有匹配的选择器。