Regular Expression to get text from css

Question

I have css that which follows..

<style>
.body{
    width:2px;
    height:3px;
    }
</style>
<style>
.anotherOne{
    key:value;
    ...........
    }
</style>

and the HTML part

<div class="body"></div>

So how can i get the value inside the 'body' class on first style tag ? also i want to append data there,how can i do with this javascript and regular expressions ?? is there any other way ?

I want to get anything inside that starting with ".body{" and ending with "}"

Edit :the expected result is width:2px; height:3px;

What is it that you're trying to accomplish? I don't think regexp are the suitable solution for this — Aziz
– Aziz, Commented Nov 10, 2011 at 5:11
I have a string that contain html data,i want to get the value inside curly bracket that start with body selector. — Red
– Red, Commented Nov 10, 2011 at 5:14
Where is this CSS? In your web page as parsed CSS styles? In a javascript dtring? — jfriend00
– jfriend00, Commented Nov 10, 2011 at 5:15
Do you want to do this server-side (php) or client-side (javascript)? — Aziz
– Aziz, Commented Nov 10, 2011 at 5:19

jfriend00 · Accepted Answer · 2011-11-10 06:51:38Z

1

If you have CSS styles isolated in a javascript string, you can get the width value with this regex:

var re = /\.body\s*\{[^\}]*?width\s*:\s*(.*);/m;
var matches = str.match(re);
if (matches) {
    var width = matches[1];
}

Test case here: http://jsfiddle.net/jfriend00/jSDeJ/.

The height value can be obtained with this regex:

\.body\s*\{[^\}]*?height\s*:\s*(.*);/m;

If you just want the text (whatever it is that's inside the curly brackets for the body tag, then you can do that with this:

var re = /\.body\s*\{([^\}]*?)\}/m;
var matches = str.match(re);
if (matches) {
    var width = matches[1];
}

You can see it work here: http://jsfiddle.net/jfriend00/jSDeJ/3/

If you then want to replace the entire .body style with your own string, you can do that like this:

var str = " <style>\n.body{\n width:2px; \n height:3px; \n  } \n</style>"; 

var re = /(\.body\s*\{)([^\}]*?)(\})/m;
var newStyle = "width: 20px; \nheight: 1000px;";
var result = str.replace(re, "$1" + newStyle + "$3");
alert(result);

You can see that work here: http://jsfiddle.net/jfriend00/jSDeJ/8/

edited Nov 10, 2011 at 6:51

answered Nov 10, 2011 at 5:20

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

13 Comments

andho Over a year ago

I think you should constrain the regex to the style tag

jfriend00 Over a year ago

I assumed he already had just styles in the string (much of this question is vague). If not, then the OP can do that first.

Red Over a year ago

it returns 2px the expected one is width:2px; height:3px;

jfriend00 Over a year ago

Replacement example added at the end of my answer.

jfriend00 Over a year ago

Sure, you can remove the dot if you want. Just remove the slash before it too.

|

Homer6 · Accepted Answer · 2011-11-10 06:32:59Z

0

This looks promising...

https://github.com/sabberworm/PHP-CSS-Parser

Or, if you just want to know the "computed value", I'd rely on the browser's parser and just extract the values with javascript DOM methods.

Hope that helps...

answered Nov 10, 2011 at 6:32

Homer6

15.2k11 gold badges65 silver badges83 bronze badges

Collectives™ on Stack Overflow

Regular Expression to get text from css

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related