<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../node_modules/vxe-table/lib/style.css" type="text/css"/>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
    axios.get('../../node_modules/vxe-table/lib/style.css').then((res) => {
        function pxAndRemInterturn({content, unit, rule, updateUnit}) {
            console.log(content)
            rule = rule || 100
            if (!rule) return content;
            const reg = {
                px: /[\:]*[\s]*[-]*[\s]*[0-9]*[\.]*[0-9]*px/g,
                rem: /[\:]*[\s]*[-]*[\s]*[0-9]*[\.]*[0-9]*rem/g,
                number: /[0-9]*[\.]*[0-9]*/g
            }
            // 获取到所有匹配的内容
            const res = content.match(reg[unit])

            // 传进来的是正则匹配的结构内容
            function getRightData(arr) {
                const result = []
                for (let i = 0; i < arr.length; i++) {
                    result.push(Number(arr[i].replace(new RegExp(' ', "gm"), '').replace(':', '').replace(unit, '')))
                }
                return result
            }

            const rightData = getRightData(res)

            // 单位换算
            function unitConversion({num, unit, updateUnit, rule}) {
                let res = ''
                if (unit === 'px' && updateUnit === 'rem') {
                    res = num / rule
                } else if (unit === 'rem' && updateUnit === 'px') {
                    res = num * rule
                }
                return ' ' + res + updateUnit
            }

            for (let i = 0; i < rightData.length; i++) {
                let txt = unitConversion({
                    num: rightData[i],
                    unit,
                    updateUnit,
                    rule
                })
                if (res[i].indexOf(':') >= 0) {
                    txt = ': ' + txt
                }
                content = content.replace(res[i], txt)
            }
            return content
        }

        const updateContent = pxAndRemInterturn({
            content: res.data,
            unit: 'px',
            rule: 16,
            updateUnit: 'rem'
        })
        document.querySelector('body').innerHTML = updateContent
    })

</script>
</body>
</html>