javascript - 匹配伪元素内容属性的正则表达式示例

Question

我正在尝试解析 javascript 中的伪选择器内容。 html内容可以是

content: counter(item)" " attr(data) "" counter(item1,decimal) url('test.jpeg') "hi" attr(xyz);

为了解析此内容，我使用下面的正则表达式(从互联网复制的匹配括号的逻辑)

 counter\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)

这会选择所有带有 "(" 的计数器，但计数器不能有嵌套的括号(据我所知，如果我错了请纠正我)。同样的正则表达式我用来选择其他内容也。

1. 属性:属性\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\) )*\)

2. 引用:openQuote\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\) )*\)

3. 字符串:双引号/单引号内的任何内容:(当前正则表达式不起作用".*")

我在这里有以下问题 1.正则表达式匹配单括号(伪选择器内容属性中不能嵌套括号) 2.单个正则表达式将按照给定顺序匹配计数器、属性、url 和字符串内容(顺序很重要，因为我想稍后用评估值替换它们)

如果需要更多信息，请告诉我。 谢谢

Answer 1

您的第一个正则表达式确实匹配嵌套括号(但不匹配转义括号)。这是可取的吗？

没有嵌套或转义，这些就变得简单多了。
这是忽略嵌套可能性的第一个正则表达式的变体:

counter\([^)]*\)

它匹配文字 counter(，然后是零个或多个非右括号，最后是右括号。(在 regex101 中对 your first regex 和 my simpler version 的完整解释。)

我相信这会回答您的第一个问题，但如果您确实在寻找“匹配 [a] 单括号的正则表达式”，那只是 [()]，它将匹配打开或关闭的括号字符。如果您知道要匹配哪一个，也可以显式匹配 \( 或 \)。

匹配引号(不考虑嵌套或转义引号)同样简单:

"[^"]*"

这匹配一个文字双引号字符 (")，然后是零个或多个非双引号字符，然后是另一个文字双引号字符。

您的第二个请求是“单个正则表达式，它将按给定顺序匹配计数器、属性、url 和字符串内容(顺序很重要，因为我想稍后用评估值替换它们)。”

我不确定您打算如何获得 CSS content property的值，给定它通常在 ::after 或 ::before 伪类中的方式，它们是 not available from the DOM ，但这里有一些填充它的虚拟代码，因此我们可以对其进行操作:

var css = `content: counter(item)" " attr(data) "" counter(item1,decimal) url('test.jpeg') "hi" attr(xyz); color:red;`;

// harvest last `content` property (this is tricked by `content: "content: blah"`)
var content = css.match(/.*\bcontent:\s*([^;"']*(?:"[^"]*"[^;"']*|'[^']*'[^;"']*)*)/);
if (content) {
  var part_re = /(?:"([^"]*)"|'([^']*)'|(?:counter|attr|url)\(([^)]*)\))/g;
  while ( part = part_re.exec(content[1]) ) { // parse on just the value
    if      (part[0].match(/^"/))       { /* do stuff to part[1] */ }
    else if (part[0].match(/^'/))       { /* do stuff to part[2] */ }
    else if (part[0].match(/^counter/)) { /* do stuff to part[3] */ }
    else if (part[0].match(/^attr/))    { /* do stuff to part[3] */ }
    else if (part[0].match(/^url/))     { /* do stuff to part[3] */ }

    // silently skips other values, like `open-quote` or `counters(name, string)`
  }
}

第一个正则表达式(第 4 行)从 CSS 中提取最后一个 content 属性(最后一个是因为它会覆盖以前的实例，但请注意，这会愚蠢地提取 content: blah 来自 content: "content: blah")。在找到分词符的最后一个实例和 content: 之后，它会吸收所有空格，然后匹配该行的其余部分，直到出现分号、双引号或单引号。非捕获组允许双引号或单引号之间的任何内容，这与我们匹配此答案顶部附近的引号的方式大致相同。 (完整解释 this CSS content regex 在 regex101。)

第二个正则表达式(第 7 行，分配给 part_re)处于 while 循环中，因此我们可以按顺序处理 content 属性中的每个单独值。它匹配双引号字符串或单引号字符串或某些命名值(计数器或 attr 或 url)。查看值数据存储位置的条件和注释。 this value parsing regex的完整解释在 regex101(请参阅右栏中间的“匹配信息”以查看我如何存储值的数据)。