行联样式化处理

<!DOCTYPE html>
<html lang="en">

<head>
    <title>处理行样式json数据</title>
    <title>Document</title>
</head>

<body>

    <h1>失去焦点查看结果</h1>
    <h1>浏览器中复制你的样式</h1>
    <textarea id="styles" style="width: 100%;height: 200px;font-size: 20px; font-weight: 200;" type="text" placeholder="例如: 
    word-break: break-all;
    word-wrap: break-word;
    position: relative;"></textarea>
    <h1>结果</h1>
    <textarea id="data" style="width: 100%;height: 200px;font-size: 20px; font-weight: 200;" type="text" ></textarea>
    <script type="text/javascript">
        //处理函数
        function deal(style) {
            const a = `@${style}@`;
            const b = a
                .toString()
                .replace(/\n/g, "")
                .replace(/@/g, '"')
                .replace(/:/g, '":"')
                .replace(/" /g, '"')
                .replace(/;/g, '",\n"')
                .split('""')[0];
            let c = `{\n${b.slice(0, b.length - 2)}\n}`;
            while (c.indexOf('" ') >= 0) {
                c = c.replace(/" /g, '"');
            }
            console.log(c);
            return c;
        }
        const obj = document.getElementById("styles");
        const obj2 = document.getElementById("data");
        obj.onblur = () => {
            // deal(obj.value);
             obj2.value = deal(obj.value);
        }


    </script>
</body>

</html>