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