js正则匹配处理样式class style

最新推荐文章于 2024-07-07 14:09:47 发布

reembarkation

最新推荐文章于 2024-07-07 14:09:47 发布

阅读量1.1k

点赞数

分类专栏： js vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/reembarkation/article/details/126016821

版权

js 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

vue

48 篇文章 0 订阅

订阅专栏

本文介绍了一个从CSS字符串中提取样式类名及内容的方法。通过正则表达式匹配，分别获取了所有样式类名和样式块，并创建了一个对象，以样式名为键，样式内容为值。对于重复的样式名，只保留了一个。讨论了处理过程并邀请读者分享更好的解决方案。

摘要由CSDN通过智能技术生成

朋友项目中遇到一个问题，在style中提取出样式名和样式的内容，然后在其他地方使用。之前没有遇到过，经过考虑进行了一下的处理，代码如下：

let str=`.c-1 {
        color: #fff;
      }
      .c-2 {
         color: #666;
      }
      .c-3 {
       color: #999;
      }
     .c-1, .c-2, .c-3 {
          color: #eee;
      }`;
   let classNames=[]
   let classes=[]
   let classObj={}
    var res=str.match(/[\.][\w\-]+/ig); 
    if(res && res.length>0){
      for(let item of res){
        if(!classNames.includes(item)){ // 去除重复的样式名
          classNames.push(item)
        }
      }
    }
    console.log('classNames',classNames)
    // 打印classNames 为数组.c-1 .c-2 .c-3
 
   // 将所有样式插入数组classes
    var res3=str.match(/(\.[\w\-\,]+(\s)*)*\{([^}\.])*}/ig); 
    classes.push(...res3)
    
    
    for(let name of classNames){
      //classObj[name]=""
      let inname=classes.filter(x=>x.indexOf(name)>=0) // 根据样式名，将所有涉及的样式选取出来，拼接新的样式
      let allstype=""
      if(inname && inname.length>0){
        
         for(let style of inname){
           let res4=style.match(/\{([^}\.])*}/g); 
           if(res4 && res4.length>0){
              allstype = allstype + res4[0].replace("{","").replace("}","")
           }
         }
        // 将样式名和样式放入对象中
         classObj[name]=allstype
      }
    }

暂时想到的处理方式，如果大家有更好的方式，欢迎交流！