0

I have been trying to put together a simple RegEx and Googling for the last hour but I can't seem to find something that will work for me. I am looking to take a simple input string, say ".cSSRule { value: 'foo'; }" and split it into an array that looks like this: "[cssRule:value]" where the name of the rule is the key and the actual rule is value. I'm not looking for a full-on parser (even though I know they exist) because that would be overkill for the simple strings that I am working with. Would anyone kindly point me in the right direction?

Thanks,

Blu

Blu Dragon
  • 394
  • 5
  • 14
  • Not an answer to your question, but to what extent can you control the process? Might it be an option to actually apply the CSS styles to a document, and parse the actual calculated values? It may not be applicable in your case but it would be the easiest way – Pekka Dec 10 '10 at 19:23
  • I am not quite sure I understand what you are asking. This is actually for a simple wrapper for insertRule/addRule. The function takes the same parameters as insertRule but since addRule is so radically different I need to break things up. Why does Microsoft have to make every developer's life a living hell? – Blu Dragon Dec 11 '10 at 05:40

3 Answers3

2

In this case something like

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

would work. I don't think it's very generic though.

KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • Thanks! I'll see if that meets my needs. – Blu Dragon Dec 11 '10 at 05:36
  • Your code strips out the ".", ";" and ":" characters. I've modified it so that it does not. Now I just need to make the values as inner array of the rule. ("[cssRule:[values]") I should have made that more clear in the OP. Here is my modified code so far: "rule.replace(/}/g,"")).split(/{/).join(":\"").replace(/.$/,"\"")" – Blu Dragon Dec 11 '10 at 06:06
1

This should do it:

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

'matches' becomes an array containing three elements: the first (index 0) is the full string of what it was matching against; the second (index 1) matches everything between a period and the open brace, and the third (index 2) matches everything between the braces.

Rob Williams
  • 1,442
  • 12
  • 13
  • This looks like it'll meet my needs. One correction, though: "someArray" should be "someObject". – Blu Dragon Dec 12 '10 at 18:48
  • I had to make one little change so that it would handle more complex rules as well as the basic ones: I removed the "\." from the RegEx. Thanks again for your awesome help! – Blu Dragon Dec 12 '10 at 19:01
  • Sorry about the error (I've corrected it for future users)... glad I could help. – Rob Williams Dec 16 '10 at 08:53
1

Where is the input string coming from? If it's a safe source (i.e. not coming from the user) just use a regex to strip the .cSSrule part and eval() the rest -- you have your complete associative array parsed and created for you.

Edit: you'll need to replace ; with , as well, except for the last occurence:

input
   .replace(/^(.*)(?={)/, '')
   .replace(/;(?!(\s)*?})/g, ',')
   .replace(';', '');
myCss = eval(input);
David Tang
  • 92,262
  • 30
  • 167
  • 149
  • Yes the source is safe as it is coming from a string specified in code. I'll take a look at your solution as well as Rob's. Thank you guys very much! – Blu Dragon Dec 12 '10 at 17:48
  • I didn't have much luck with your code. IE's JS Debugger kept spitting out an error saying there was a missing ";". – Blu Dragon Dec 12 '10 at 18:47