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

Improve this question
2
  • 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 Commented Dec 10, 2010 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? Commented Dec 11, 2010 at 5:40

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! I'll see if that meets my needs.
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(/.$/,"\"")"
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.

Improve this answer

3 Comments

This looks like it'll meet my needs. One correction, though: "someArray" should be "someObject".
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!
Sorry about the error (I've corrected it for future users)... glad I could help.
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);
Improve this answer

2 Comments

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!
I didn't have much luck with your code. IE's JS Debugger kept spitting out an error saying there was a missing ";".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.