JavaScript regex匹配引号内的字符，而不是字符集中的字符

Question

我有一个字符串，希望使用#, ., [], or {}字符进行拆分，就像CSS中一样。 所需的功能是：

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

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

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

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

编辑：我已经找到了一个正常的正则表达式，但是不能处理引号内的转义引号（例如： "stuff here \\\\" quote " ）。如果有人知道该怎么做，那将非常有帮助：

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

Answer 1

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

给定您的字符串，它将产生

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

上面的RegExp大致基于CSS 2.1词汇语法

Answer 2

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

Answer 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"]