JavaScript 正则表达式匹配引号内的字符而不是字符集中的字符答案

【问题标题】：JavaScript regex match characters inside quotes and not in character setJavaScript 正则表达式匹配引号内的字符而不是字符集中的字符
【发布时间】：2011-09-21 12:41:23
【问题描述】：

我有一个字符串，我想用#, ., [], or {} 字符分割，就像在 CSS 中一样。所需的功能是：

- 输入： "div#foo[bar='value'].baz{text}"
- 输出： ["div", "#foo", "[bar='value'", ".baz", "{text"]

这很容易，使用这个 RegEx： input.match(/([#.\[{]|^.*?)[^#.\[{\]}]*/g)

但是，这不会忽略引号内的语法字符，我也希望如此。（例如"div[bar='value.baz']" 应该忽略.）

如何使 RegEx 的第二部分（[^#.\[{\]}]* 部分）不仅捕获否定字符集，还捕获引号内的任何字符。换句话说，我怎样才能将正则表达式 (\"|').+?\1 实现到我当前的表达式中。

编辑： 我已经找到了一个正常工作的正则表达式，但无法处理引号内的转义引号（例如："stuff here \\" quote "）。如果有人知道如何做到这一点，那将非常有帮助：

str.match(/([#.\[{]|^.*?)((['"]).*?\3|[^.#\[\]{\}])*/g);

【问题讨论】：

标签： javascript regex quotes

【解决方案1】：

var str = "div#foo[bar='value.baz'].baz{text}";
str.match(/(^|[\.#[\]{}])(([^'\.#[\]{}]+)('[^']*')?)+/g)
// [ 'div', '#foo', '[bar=\'value.baz\'', '.baz', '{text' ]

【讨论】：

我稍作修改以处理{} 内的引号和[] 内的多个bar=value: str.match(/(^|[\.#[\]{}])(([^'\.#[\]{}]+)('[^']*')?|('[^']*'))+/g)

【解决方案2】：

var tokens = myCssString.match(/\/\*[\s\S]*?\*\/|"(?:[^"\\]|\\[\s\S]*)"|'(?:[^'\\]|\\[\s\S])*'|[\{\}:;\(\)\[\]./#]|\s+|[^\s\{\}:;\(\)\[\]./'"#]+/g);

给定你的字符串，它会产生

div
#
foo
[
bar=
'value.foo'
]
.
baz
{
text
}

上面的正则表达式大致基于CSS 2.1 lexical grammar

【讨论】：

【解决方案3】：

首先，我怎么强调都不为过：你不应该使用正则表达式来解析 css，你应该使用真正的解析器，例如 http://glazman.org/JSCSSP/ 或类似的 - 许多人已经构建了它们，不需要你重新发明轮子。

也就是说，要解决您当前的问题，请执行以下操作：

var str = "div#foo[bar='value.foo'].baz{text}";

str.match(/([#.\[{]|^.*?)(?:[^#\[{\]}]*|\.*)/g);

//["div", "#foo", "[bar='value.foo'", ".baz", "{text"]

【讨论】：

输入字符串实际上不是文字 CSS。我正在尝试编写一个正则表达式，它可以按上面列出的字符拆分输入字符串。我想在拆分中包含.，但如果它们在引号内，请忽略它（或上面列出的任何字符）。