Javascript 按空格或字符分隔文本并包含字符

我想按空格和特殊字符滑动文本，但我想保留这些字符。我想分开的文本是CSS格式的。以以下为例：

.box {
  background: red;
  color: white;
}

我已经有了这样的数组格式

[ " .box { " ]
[ " background: red; " ]
[ " } " ]
[ " color: white; " ]

我想用空格和这些字符“：”和“；”分割每个字符串

因此，我将用类似的方法：

[".box"] ["{"]
["background"] [":"] ["red"] [";"]
["color"] [":"] ["white"] [";"]
["}"]

我想记住语法，以下是一些可能的场景：

background: red;          -> ["background"] [":"] ["red"] [";"]
background      : red ;   -> ["background"] [":"] ["red"] [";"]
backg    round : red ;    -> ["backg"] ["round"] [":"] ["red"] [";"]

提前谢谢

编辑

---

关于这个重复的问题，我正在研究另一个帖子的答案，它可能会对我的具体情况有所帮助，但是讨论的问题可能在不同的上下文中，而不是解析CSS。请考虑一下，谢谢你的参考。 您可以使用数组元素上的循环，并使用以下正则表达式调用

.match（）

：以获取所有单独的元素：

var results = [];
arr.forEach(function(a) {
  a[0].match(/([\.\#]?[a-z]+[\s?>+~\s?[a-z]+]?)|([{:};])|([a-z0-9]+)/gi).forEach(function(m) {
    results.push(m);
  });
});

您可以测试以查看它是否匹配所有CSS选择器

演示：

var-arr=[
[“.box{”]，
[“背景：红色；”]，
[" } "],
[“颜色：白色；”]
];
var结果=[]；
arr.forEach（功能（a）{
a[0].匹配（/（[\.\\\\\\\\]]？[a-z]+[\s？>+~\s？[a-z]+]）|（[{:}；]）|（[a-z0-9]+）/gi）.forEach（函数（m）{
结果：推（m）；
});
});
控制台日志（结果）可能是这样的


var originalText=`.box{
背景：红色；
颜色：白色；
}`;
var parsed=originalText
.split（/（|：：| |\n）/g）//使用捕获组进行拆分和维护
.filter（p=>p.trim（））；//仅保留非空白元素
console.log（已解析）虽然你没有按空格分割（你只是修剪它们），也没有按
分割两者都不是，因为这将在所有数组中产生额外的空字符串。@ibrahimmahrir如果我只使用空格，则此
背景：红色
将变成这个
[“背景：”][“红色；”][/code>，而不是这个[“背景”][“：”][“红色”][“；”]如果属性规则中没有空格，可能会重复什么？这不起作用，例如在这个
[“背景：红色；”][/code>上，结果应该是[“背景”][“：”][“红色”][“；”]，而我得到的是
@OmarAguinaga看一下我的编辑请记住css规则可能比给出的示例更复杂。
-~+:
可以出现在那里。哦，还有Unicode。谢谢你的回答，我不得不说我也喜欢@GabyakaG.Petrioli的答案，也许更好，因为它更可读，但既然你的答案解决了具体问题，我就给你答案我想告诉你。即使使用这个解决方案，也有很多选择器不匹配。请检查一下它是如何失败的。请不要误解我的意思，但我想表明的是，处理所有这些选择器有点不合适，我们应该检查更复杂的情况。@chsdk很公平。我不是想挑剔你的解决方案，我只是st通常不喜欢使用正则表达式解析整个规范。