用JavaScript中的正则表达式解析CSS字符串

在过去的一个小时里，我一直在尝试编写一个简单的正则表达式并在谷歌上搜索，但似乎找不到适合我的东西。我希望获得一个简单的输入字符串，比如“.cSSRule{value:'foo'；}”，并将其拆分为如下数组：“[cSSRule:value]”，其中规则的名称是键，实际规则是值。我并不是在寻找一个完整的语法分析器（即使我知道它们存在），因为对于我正在使用的简单字符串来说，这样做太过分了。谁能给我指出正确的方向吗

谢谢

---

Blu

在这种情况下

var str = ".cssRule { value: 'foo'; }";
someArray.push( 
     ( (str.replace(/\.|}|;/g,''))
         .split(/{/)
         .join(':"')
         .replace(/\s/g,'')
         .replace(/.$/,'"')
     ); 
     /* =>"[cssRule:"value:'foo'"] */

---

会有用的。但我认为它不是很通用。

在这种情况下

var str = ".cssRule { value: 'foo'; }";
someArray.push( 
     ( (str.replace(/\.|}|;/g,''))
         .split(/{/)
         .join(':"')
         .replace(/\s/g,'')
         .replace(/.$/,'"')
     ); 
     /* =>"[cssRule:"value:'foo'"] */

会有用的。但我认为它不是很通用。

这应该可以做到：

var str = ".cssRule { value: 'foo'; }";
var someObject = new Object;
var matches = str.match( /^\.(.*?){(.*?)}/ );
someObject[matches[1].replace(/ /g,'')] = matches[2].replace(/ /g,'');

“matches”变成一个包含三个元素的数组：第一个（索引0）是它所匹配的内容的完整字符串；第二个（索引1）匹配句点和大括号之间的所有内容，第三个（索引2）匹配大括号之间的所有内容。

这应该可以做到：

var str = ".cssRule { value: 'foo'; }";
var someObject = new Object;
var matches = str.match( /^\.(.*?){(.*?)}/ );
someObject[matches[1].replace(/ /g,'')] = matches[2].replace(/ /g,'');

---

“matches”变成一个包含三个元素的数组：第一个（索引0）是它所匹配的内容的完整字符串；第二个（索引1）匹配句点和大括号之间的所有内容，第三个（索引2）匹配大括号之间的所有内容。

输入字符串来自哪里？如果它是一个安全的源代码（即不是来自用户），只需使用正则表达式来剥离

.cSSrule

部分和

eval（）

其余部分，就可以解析并创建完整的关联数组

编辑：您需要替换

以及
，
，最后一次出现的情况除外：

input
   .replace(/^(.*)(?={)/, '')
   .replace(/;(?!(\s)*?})/g, ',')
   .replace(';', '');
myCss = eval(input);

输入字符串来自哪里？如果它是一个安全的源代码（即不是来自用户），只需使用正则表达式来剥离
.cSSrule
部分和
eval（）
其余部分，就可以解析并创建完整的关联数组

编辑：您需要替换
以及
，
，最后一次出现的情况除外：

input
   .replace(/^(.*)(?={)/, '')
   .replace(/;(?!(\s)*?})/g, ',')
   .replace(';', '');
myCss = eval(input);

这不是对你问题的回答，但你能在多大程度上控制这个过程？是否可以选择将CSS样式实际应用于文档，并解析实际计算值？这可能不适用于你的情况，但这将是最简单的方法。我不太确定我是否理解你的要求。这实际上是针对insertRule/addRule的简单包装。该函数采用与insertRule相同的参数，但由于addRule与insertRule完全不同，我需要将其分解。为什么微软要让每个开发者的生活都变成地狱？这不是你问题的答案，而是你能在多大程度上控制这个过程？是否可以选择将CSS样式实际应用于文档，并解析实际计算值？这可能不适用于你的情况，但这将是最简单的方法。我不太确定我是否理解你的要求。这实际上是针对insertRule/addRule的简单包装。该函数采用与insertRule相同的参数，但由于addRule与insertRule完全不同，我需要将其分解。为什么微软要让每个开发者的生活都变成地狱？谢谢！我看看这是否满足我的需要。你的代码去掉了“.”、“；”和“：”字符。我对它进行了修改，这样它就不需要了。现在我只需要将这些值作为规则的内部数组。（“[cssRule:[values]”我应该在OP中更清楚地说明这一点。这是我迄今为止修改过的代码：“rule.replace（/}/g）”）.split（/{/）.join（“：\”）.replace（/.$/，“\”）“谢谢！我看看这是否满足我的需要。你的代码去掉了“；”和“：”字符。我已经修改了它，所以它不会。现在我只需要将值作为规则的内部数组。（“[cssRule:[values]”我应该在OP中更清楚地说明这一点。这是我迄今为止修改的代码：“rule.replace（/}/g）”）。split（/{/）.join（：\）.replace（/.$/，“\”）是的，源代码是安全的，因为它来自代码中指定的字符串。我将查看您的解决方案以及Rob的解决方案。非常感谢大家！我对您的代码没有太多的运气。IE的JS调试器不断抛出一个错误，说缺少“；”。是的，源代码是安全的，因为它来自代码中指定的字符串。我将查看您的解决方案以及Rob的解决方案。非常感谢大家！我对您的代码没有太多的运气。IE的JS调试器不断抛出一个错误，说缺少“；”。这看起来可以满足我的需要。不过，有一个更正：“someArray”应该是“someObject”。我必须做一点小小的更改，以便它能够处理更复杂的规则以及基本规则：我从正则表达式中删除了“\”。再次感谢您的帮助！对错误表示抱歉（我已经为未来用户更正了它）…很高兴我能提供帮助。这看起来可以满足我的需要。不过，有一个更正：“someArray”应该是someObject“。我必须做一点小小的更改，以便它能够处理更复杂的规则以及基本的规则：我从正则表达式中删除了“\”。再次感谢您的帮助！对错误表示抱歉（我已经为未来的用户更正了它）…很高兴我能提供帮助。