<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

     var str = ` <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>我的银行卡</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width:100%;
            background: #eee;
        }
        header{
            box-sizing: border-box;
            width:375px;
            height:75px;
            font-size:20px;
            font-weight:bold;
            font-family: PingFangSC-Regular,Arial,sans-serif  ;
            text-align:center;
            line-height:75px;

        }
        section{
            width:100%;
            height:auto;
            overflow: hidden;
            box-sizing: border-box;
        }
        .bg{
            background:#388dcf;
        }
        .bg2{
            background:lightblue;
        }
        section .item{
            width:343px;
            height:175px;
            margin:0 auto;
            box-sizing: border-box;
            border-radius:7.5px;
            padding: 16px 17px 17px 12px;
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom:15px;
        }
        .pull-left{
            float:left;
        }
        .clear{
            clear:both;
        }
        .pull-right{
            float:right;
        }
        .top .logo{
            width: 39px;
            height:39px;
            border-radius: 50%;
        }
        .top .title{
            color:white;
        }
        .top .title .bank{
            font-size:17px;
            font-weight: 600;
            line-height:17px;
        }
        .top .title .card-type{
            font-size:14px;
            padding-top:4px;
        }
        .top .cardID{
            padding-top:8px;
            color:white;
            font-family: PingFangSC-Regular, Arial, sans-serif ;
            font-weight: bold;
            font-size: 16px;
            font-weight:550;
        }
        .bottom{
            color:white;
            text-align:right;
            font-size: 14px;
        }
        .hide{
            color: #afc4e6;
        }

        .jianhang{
            background: linear-gradient(to bottom right, #398cce, #3864be);
            box-shadow: 0px 0px 3px #3864be;
        }

        .zhaoshang{
            background: linear-gradient(to bottom right, #ff7566, #ff5262);
            box-shadow: 0px 0px 3px #ff5262;
        }
        .wangshang{
            background: linear-gradient(to bottom right, #01aa9a, #028caf);
            box-shadow: 0px 0px 3px #028caf;
        }
        .nonghang{
            background: linear-gradient(to bottom right, #438A4E, #0C4139);
            box-shadow: 0px 0px 3px #0C4139;
        }
        .jiaotong{
            background: linear-gradient(to bottom right, #A49264, #A58671);
            box-shadow: 0px 0px 3px #A58671;
        }
    </style>
</head>
<body>
<header>我的银行卡</header>
<section>
    <div class="item jianhang">
        <div class="top">
            <div class="title pull-left">
                <div class="bank">建设银行</div>
                <div class="card-type">储蓄卡</div>
            </div>
            <div class="cardID pull-right"><span class="hide">****</span>&nbsp;<span>9527</span></div>
        </div>
        <div ></div>
        <div class="bottom">
            每日支付限额 10000 元
        </div>
    </div>
    <div class="item zhaoshang">
        <div class="top">
            <div class="title pull-left">
                <div class="bank">招商银行</div>
                <div class="card-type">信用卡</div>
            </div>
            <div class="cardID pull-right"><span class="hide">****</span>&nbsp;<span>4396</span></div>
        </div>
        <div ></div>
        <div class="bottom">
            每日支付限额 20000 元
        </div>
    </div>
    <div class="item wangshang">
        <div class="top">
            <div class="title pull-left">
                <div class="bank">网商银行</div>
                <div class="card-type">银行账户</div>
            </div>
            <div class="cardID pull-right"><span class="hide">****</span>&nbsp;<span>1024</span></div>
        </div>
        <div ></div>
        <div class="bottom">
            每日支付限额 40000 元
        </div>
    </div>
    <div class="item nonghang">
        <div class="top">
            <div class="title pull-left">
                <div class="bank">农业银行</div>
                <div class="card-type">储蓄卡</div>
            </div>
            <div class="cardID pull-right"><span class="hide">****</span>&nbsp;<span>8848</span></div>
        </div>
        <div ></div>
        <div class="bottom">
            每日支付限额 80000 元
        </div>
    </div>
    <div class="item jiaotong">
        <div class="top">
            <div class="title pull-left">
                <div class="bank">交通银行</div>
                <div class="card-type">储蓄卡</div>
            </div>
            <div class="cardID pull-right"><span class="hide">****</span>&nbsp;<span>1987</span></div>
        </div>
        <div ></div>
        <div class="bottom">
            每日支付限额 80000 元
        </div>
    </div>
</section>
</body>
</html>  `

//  正则替换
    var res = str.replace(/(\d+)px/g,function(val,group){
       return group / 100 + 'rem'
    })

    console.log(res)

</script>




</body>
</html>