Code Comp Ext
Hub » Code Comp Ext



<head>
<link rel="stylesheet" type="text/css" href="/local--code/7happy7:code-comp-ext/3">
</head>
 
<body style="margin: 0; padding: 0;">
<form>
<input type="radio" id="comp" name="a" checked="checked">compression<input type="radio" id="ext" name="a">extraction
 
<input type="button" value="reset" onclick="reset()"><input type="button" value="copy result" onclick="copyAfter()">
<textarea id="before" placeholder="insert before-text" oninput="replace()" rows="10" style="width: 99%;"></textarea>
<textarea id="after" rows="10" style="width: 99%;" placeholder="result" readonly></textarea>
 
<script src="/local--code/7happy7:code-comp-ext/2"></script>
</body>
let comp = document.getElementById("comp");
let ext = document.getElementById("ext");
 
let before = document.getElementById("before");
let after = document.getElementById("after");
let afterCode, i;
afterCode = "";
 
/*
@import url();a, b {a: a;a: a;}a {a: a;a: a;}@media (a) {a {a: a;a: a;}}
 */
function replace() {
    afterCode = before.value;
    if (comp.checked) {
        afterCode = afterCode.split(/  +/g).join("").split((/\n/g)).join("");
    }else {
        afterCode = afterCode.split(/{/g).join("{\n    ").split(/;/g).join(";\n    ").split(/}/g).join("}\n").split(/    }/g).join("}").split(/, ?/g).join(",\n").replace(/{\n    (.*?){/mg, "{\n$1{").replace(/(}[^{]*?;\n)    /mg, "$1");
    }
 
    after.value = afterCode;
}
 
function reset(){
    before.value = "";
    replace();
}
 
function copyAfter(){
    if(execCopy(after.value)){
    }else {
        alert('error: copying failed');
    }
};
 
function execCopy(string) {
    let temp = document.createElement('div'); 
    temp.appendChild(document.createElement('pre')).textContent = string;
 
    let elemPosition = temp.style;
    elemPosition.position = 'fixed';
    elemPosition.left = '-100%';
 
    document.body.appendChild(temp);
    document.getSelection().selectAllChildren(temp);
 
    let result = document.execCommand('copy');
    document.body.removeChild(temp);
 
    return result;
};
body * {
    font-family: Courier, monospace;
    font-size: 10px;
}
input, textarea {
    font-family: inherit;
    font-size: 100%;
}
form {
    margin: 1em 0 0;
}
table * {
    margin: 0;
    padding: 0;
}
td {
    width: 50%;
    vertical-align: top;
}
ul {
    list-style: none;
}
ul#repList {
    position: relative;
    left: -2px;
}
ul#exList > li:before {
    content: ".split(";
}
ul#exList > li:after {
    content: ")";
}
ul#repList > li:before {
    content: '.join("';
}
ul#repList > li:after {
    content: '")';
}
li {
    border-bottom: 1px solid #fff;
    margin-bottom: 0.2em;
}
li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}