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

如果您在javascript字符串中分隔了CSS样式，则可以使用此正则表达式获取宽度值：

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

或者，如果您只想知道“计算值”，我会依赖浏览器的解析器，只需使用javascript DOM方法提取值。

希望有帮助...

正则表达式从css获取文本

2 个答案: