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

Question

我正在尝试解析伪 select 或 javascript 中的内容。 Html内容可以

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

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

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

这个select所有的计数器都带有"("但是计数器不能有嵌套的括号（据我所知，如果我错了请纠正我） .同样的正则表达式我也在使用 select 其他内容。

属性：attr\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)
引用：openQuote\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)
字符串：double/single 引号内的任何内容：（当前正则表达式不工作 ".*"")

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

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

Answer 1

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

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

counter\([^)]*\)

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

我相信这回答了你的第一个问题，但如果你真的在寻找一个 "regex to match [a] single parenthesis," 那只是 [()]，它将匹配左括号或右括号字符。如果您知道要匹配哪一个，也可以显式匹配 \( 或 \)。

匹配引号（不考虑嵌套或转义引号）同样容易：

"[^"]*"

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

您的第二个请求是 "single regex that will match the counter, attribute , url and string content in the given order (order is important because i want to replace them later with evaluated values)."

我不确定您打算如何获得 CSS content property's value, given how that's typically in an ::after or ::before pseudo-class, which are 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: "content: blah" 中提取 content: blah）。在找到分词符的最后一个实例然后 content: 之后，它会吸收所有空格，然后匹配该行的其余部分，直到出现分号、双引号或单引号。非捕获组允许双引号或单引号之间的任何内容，这与我们匹配此答案顶部附近的引号的方式大致相同。（this CSS content regex 在 regex101 的完整解释。）

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

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

Regex example to match pseudo element's content property

javascript

regex

pseudo-element

regex-lookarounds

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

Regex example to match pseudo element's content property

javascript

regex

pseudo-element

regex-lookarounds

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