超级字符串内class正则匹配替换可以用于css modules

最新推荐文章于 2022-07-27 16:07:50 发布

徐同保

最新推荐文章于 2022-07-27 16:07:50 发布

阅读量1.1k

点赞数

分类专栏： web前端前端技术分享文章标签：超级字符串内class正则匹配替换可以用于css modu

本文链接：https://blog.csdn.net/xutongbao/article/details/84630789

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>            
<html lang="en">            
<head>            
<meta charset="UTF-8">     
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />       
<title>超级字符串内class正则匹配替换</title>          
<style type="text/css">            
</style>           
</head>            
<body>          
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>    
  <script type="text/javascript"> 
  let text = 'hello world!';     
  let tpl =
    `<div id="m-toast" class="m-toast     m-toast-new"}>
      <div class="m-toast-inner"}>
        <div class="m-toast-text"}>
          ${text}
        </div>
      </div>    
    </div>
    <div></div>`; 
  let styles = {
    "m-toast": 1,
    "m-toast-new": '1-1',
    "m-toast-inner": 2,
    "m-toast-text":3
  }
  function buildTpl(tpl) {
    let reg = /class=\".*?\"/g;
    result = tpl.match(reg);
    for (let i = 0; i < result.length; i++) {
      let tempReg = /\".*?\"/g;
      let tempResult = result[i].match(tempReg)[0];
      tempResult = tempResult.slice(1, tempResult.length - 1);
      tempResult = tempResult.split(/\s+/);
      let myStyle = '';
      for (let j = 0; j < tempResult.length; j++) {
        if (typeof styles[tempResult[j]] !== 'undefined') {
          myStyle += styles[tempResult[j]] + ' ';
        }
      }
      let r = result[i].replace(tempReg, '"' + myStyle + '"');
      tpl = tpl.replace(result[i], r);
    }  
    return tpl;  
  }
  tpl = buildTpl(tpl);

  console.log(tpl);
  </script>      
</body>            
</html>