Регулярное выражение для получения текста из CSS

Question

У меня есть css то, что следует ..

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

и часть HTML

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

Так как я могу получить значение внутри класса 'body' в первом теге стиля?Также я хочу добавить данные там, как я могу сделать с этим JavaScript и регулярными выражениями?есть ли другой способ?

Я хочу получить что-нибудь внутри этого, начиная с ".body{" and ending with "}"

Редактировать: ожидаемый результат width:2px; height:3px;

Answer 1

Если у вас есть стили CSS, изолированные в строке javascript, вы можете получить значение ширины с помощью этого регулярного выражения:

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

Контрольный пример здесь: http://jsfiddle.net/jfriend00/jSDeJ/.

Значение высоты можно получить с помощью этого регулярного выражения:

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

Если вам просто нужен текст (какой бы он ни был внутри фигурных скобок для тега body, то вы можете сделать это с помощью этого:

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

Вы можете увидеть это здесь: http://jsfiddle.net/jfriend00/jSDeJ/3/

Если вы хотите заменить весь стиль .body своей собственной строкой, вы можете сделать это следующим образом:

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);

Вы можете увидеть эту работу здесь: http://jsfiddle.net/jfriend00/jSDeJ/8/

Answer 2

Это выглядит многообещающе ...

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

Или, если вы просто хотите узнать «вычисленное значение», я бы положился на парсер браузера и просто извлекал значения с помощью методов DOM javascript.

Надеюсь, это поможет ...