js正则匹配处理样式class style

朋友项目中遇到一个问题，在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// 将所有样式插入数组classesvar 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}}

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

js正则匹配处理样式class style相关推荐

html正则表达式识别网址,JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)...
本文实例讲述了JS正则匹配URL网址的方法.分享给大家供大家参考,具体如下: 最强的匹配网址-url的正则表达式:匹配www,http开头的一切网址直接插入正则表达式: [a-zA-Z0-9][-a ...
php 正则匹配中文标点,JavaScript_js实现正则匹配中文标点符号的方法，本文实例讲述了js正则匹配中 - phpStudy...
js实现正则匹配中文标点符号的方法本文实例讲述了js正则匹配中文标点符号的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: js正则匹配中文标点符号 function ch ...
html正则半角,JS正则密码校验之：JS正则匹配半角英文符号
概述在JS密码重网有剑据些文页的底社按标近新站的不的方校验中常常会遇到密码强度的校验需求,借用一位朋友提问的图,他在工作中遇到的一个比较经典的密码强度校验要和第,.年过事工宗据指数遍互业经搞断果会击 ...
js正则匹配以{开头,以}结尾怎么写？
我们经常需要获得某个标签开始和结束之间的内容,javascript如何实现获得以{开头,以}结尾的内容呢?这里还是得用到正则表达式,我们看看具体怎么实现? <!DOCTYPE html> ...
html js 数量正则,js正则匹配多个全部数据问题
需求:获取所有title里的内容正则表达式后面加g表示多次匹配方式一:match 返回数组方式二 exec var str='OOOT BAORJCT 174296 22mm 10yard/lo ...
JS正则密码校验之：JS正则匹配半角英文符号
概述在JS密码校验中常常会遇到密码强度的校验需求,借用一位朋友提问的图,他在工作中遇到的一个比较经典的密码强度校验要求: 这个需求有两个难点,一,是如何使用正则匹配所有半角英文标点符号,二,是如何验 ...
Auto.js正则匹配字符串是否含有中文
js正则匹配字符串是否含有中文 //验证字符串是否含有中文 function checkChinese(obj_val) {var reg = new RegExp("[\\u4E00-\\ ...
Auto.js正则匹配字符串是否为纯数字
js正则匹配字符串是否为纯数字正则匹配字符串为纯数字 //正则匹配字符串为纯数字 function 匹配纯数字(str) {var reg =/^[0-9]*$/if (reg.test(str)) ...
## JS正则匹配规则
## JS正则匹配规则 **1. 单字符匹配*** 1. 常用元字符 x 匹配一个固定的字符 [abc] 匹配 a, b, c 中的任意一个字符 [a ...

js正则匹配处理样式class style

js正则匹配处理样式class style相关推荐

最新文章

热门文章