JSX行內樣式與CSS樣式互轉工具

React組件開發過程中 往往爲了偷懶而使用JSX行內樣式進行開發, 後續才進行拆分模塊化
但是拆分的時候,複製JSX的行內樣式轉成CSS就是很噁心🤢的一個問題,要把引號去掉,把逗號改爲分號,駝峯改成中劃線
源自偷懶的本能, 索性就造個輪子解決一下~
同時也造了個Alfred的插件 插件直鏈🔗

JSX => CSS

1. 駝峯 => 中劃線
2. 單/雙引號轉無引號
3. 逗號轉分號

jsx

display:'flex',
justifyContent:'flex-start’,
flexDirection:’row’,
alignItems:’center’,
flexFlow:’wrap',

CSS => JSX

css

display:flex;
justify-content:flex-start;
flex-direction:row;
align-items:center;
flex-flow:wrap;

1. 分號分割
2. 遍歷 分割冒號
   a. 第一部分 中劃線 => 駝峯
   b. 第二部分 加上單引號
   c. 拼接第一第二部分 用逗號連接

核心代碼

 //駝峯轉中劃線
    function toMidLine(text) {
        return text.replace(/([A-Z])/g, "-$1").toLowerCase();
    }

    //中劃線轉駝峯
    function toHump(name) {
        return name.replace(/\-(\w)/g, function(all, letter) {
            return letter.toUpperCase();
        });
    }
    //jsx => css
    function jsx2css(text) {
        text = toMidLine(text);
        text = text.replace(/\"/g, "");
        text = text.replace(/\'/g, "")
        text = text.replace(/,/g, ";")
        return text;
    }
    //css => jsx
    function css2jsx(text) {
        var rowArr = text.split(';');
        rowArr.pop();
        var result = '';
        for (let i = 0; i < rowArr.length; i++) {
            var ele = rowArr[i].split(":");
            var firstEle = ele[0].trim();
            var prefix = toHump(firstEle) + ':'
            var lastEle = ele[1].trim();
            result += prefix + "'" + lastEle + "',";
            result += '\n';
        }
        return result;
    }

<!-- run -->
 <style>
        @import url(https://files.cnblogs.com/files/wgb1234/monoFont.css);
        .bg {
            margin: 20px;
            position: relative;
            max-width: 250px;
            max-height: 400px;
        }
        
        .text_input {
            font-family: 'mono-font';
            font-size: 12px;
            font-weight: bold;
            padding: 10px;
            white-space: pre-wrap;
            resize: none;
            max-width: 250px;
            max-height: 400px;
        }
        
        .btn {
            font-family: 'mono-font';
            margin: 10px 15px;
            height: 30px;
            line-height: 30px;
            font-size: 15px;
            font-weight: bold;
        }
        
        .copyBtn {
            font-family: 'mono-font';
            text-align: center;
            top: 2px;
            right: 2px;
            position: absolute;
            background-color: #000;
            color: #fff;
            font-size: 15px;
            width: 64px;
            height: 25px;
            line-height: 25px;
            border-radius: 15px;
        }
    </style>
<div id="app">
        <div class="bg">
            <span class="copyBtn" id="copy-jsx">Copy</span>
            <textarea class="text_input" name="jsx-text" id="jsx-text" cols="30" rows="10" placeholder="JSX樣式"></textarea>
        </div>
        <div style="display: flex;">
            <button class="btn" id="to-css-btn">JSX=>CSS</button>
            <button class="btn" id="to-jsx-btn">CSS=>JSX</button>
        </div>
        <div class="bg">
            <span class="copyBtn" id="copy-css">Copy</span>
            <textarea class="text_input" name="css-text" id="css-text" cols="30" rows="10" placeholder="CSS樣式"></textarea>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            }
        });

        //駝峯轉中劃線
        function toMidLine(text) {
            return text.replace(/([A-Z])/g, "-$1").toLowerCase();
        }

        //中劃線轉駝峯
        function toHump(name) {
            return name.replace(/\-(\w)/g, function(all, letter) {
                return letter.toUpperCase();
            });
        }
        //jsx => css
        function jsx2css(text) {
            text = toMidLine(text);
            text = text.replace(/\"/g, "");
            text = text.replace(/\'/g, "")
            text = text.replace(/,/g, ";")
            return text;
        }
        //css => jsx
        function css2jsx(text) {
            var rowArr = text.split(';');
            rowArr.pop();
            var result = '';
            for (let i = 0; i < rowArr.length; i++) {
                var ele = rowArr[i].split(":");
                var firstEle = ele[0].trim();
                var prefix = toHump(firstEle) + ':'
                var lastEle = ele[1].trim();
                result += prefix + "'" + lastEle + "',";
                result += '\n';
            }
            return result;
        }

        function copyToClipboard(content) {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(content).then(() => {
                    window.ele.$notify({
                        title: '溫馨提示',
                        message: '拷貝成功',
                        type: 'success',
                        position: 'top-right'
                    });
                });
            }
        }
        window.onload = function() {
            var to_css_btn = document.getElementById('to-css-btn');
            var to_jsx_btn = document.getElementById('to-jsx-btn');
            var copy_css_btn = document.getElementById('copy-css');
            var copy_jsx_btn = document.getElementById('copy-jsx');

            copy_css_btn.onclick = function() {
                var cssText = document.getElementById('css-text');
                copyToClipboard(cssText.value.trim());
            }

            copy_jsx_btn.onclick = function() {
                var jsxText = document.getElementById('jsx-text');
                copyToClipboard(jsxText.value.trim());
            }

            to_css_btn.onclick = function() {
                var jsxText = document.getElementById('jsx-text');
                var cssText = document.getElementById('css-text');
                cssText.value = jsx2css(jsxText.value).trim();
            }
            to_jsx_btn.onclick = function() {
                var jsxText = document.getElementById('jsx-text');
                var cssText = document.getElementById('css-text');
                jsxText.value = css2jsx(cssText.value).trim();
            }
        }
    </script>