Question

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

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

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

但是，这并不会忽略引号内的语法字符，因为我也喜欢它。（e.x。"div[bar='value.baz']"应忽略.）

如何使我的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 lexical grammar

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

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

3 个答案: