用Javascript实现查看CSS属性使用频率的功能

最新推荐文章于 2022-10-06 19:19:21 发布

原创最新推荐文章于 2022-10-06 19:19:21 发布 · 481 阅读

CC 4.0 BY-SA版权

本文介绍了一种通过JavaScript实现的CSS属性统计与排序的方法。该方法能够从给定的CSS样式字符串中提取所有不重复的属性，并根据这些属性在样式表中的出现次数进行排序。

var str = "";
var str = str.replace(/\s+"/g,"").match(/(;[\w-]+:)|({[\w-]+:)/g);
var cssProperty = [];  //存储css属性的数组
var result= [];        //存储结果的数组
var obj = {};

outloop:
for(var i=0; i<str.length; i++){
  var nstr = str[i].replace(/;/,"").replace(/{/,"").replace(/:/,"");
  innerloop:  //过滤重复的css属性
  for(var j=0; j<cssProperty.length; j++){
    if(cssProperty[j] == nstr) continue outloop;
    }
  cssProperty.push(nstr);
}

//创建可以用来排序的对象
for(var i=0; i<cssProperty.length; i++){
	 var totle = checkStr(cssProperty[i],str1);
   obj["css"] = cssProperty[i];
   obj["value"] = totle;
   result.push(obj);
   obj = {};
}

//重新排序结果数组
result.sort(compare('value')).reverse();


//打印
for(var i=0; i<result.length; i++){
  document.write(result[i]["css"]+":"+result[i]["value"]+"<br/>");
}


//用于数组排序的函数
function compare(name){
  return function(obj1,obj2){
    var value1 = obj1[name];
    var value2 = obj2[name];

    if(value1<value2){
      return -1;
    }
    else if(value1>value2){
      return 1;
    }
    else{
      return 0;
    }
   };
  }

//返回有多少可以匹配的字符串(css属性)
function checkStr(str,string){
  var pattern = new RegExp('[^-]'+str+':','g');
  
  var ar =[];
  for(var i=0;i<string.length; i++){
  	 var ex = pattern.exec(string);
  	 var lastIndex = pattern.lastIndex;
  	 if(lastIndex == 0) return ar.length;
  	 ar.push(lastIndex);
  	 
  }
}

现在只要给变量str赋css样式字符串,运行就可以看到结果了，我拿了个3000多行的样式表打印的结果如下：