jsEscape

jsescape.markdown

jsEscape

JavaScript string conversion tool that escapes special characters and automatically selects the result.

A Pen by Mark Hillard on CodePen.

License.

script.js

function jsChars(text) {
    switch (text.charAt(0)) {
        case '\r':
            return '\\r';
        case '\n':
            return '\\n';
        case '\v':
            return '\\v';
        case "'":
            return "\\'";
        case '"':
            return '\\"';
        case '&':
            return '\\&';
        case '\\':
            return '\\\\';
        case '\t':
            return '\\t';
        case '\b':
            return '\\b';
        case '\f':
            return '\\f';
        default:
            return text;
    }
}

function jsEscape(string) {
    var result = '';
    for (var i = 0; i < string.length; i++) {
        result += jsChars(string.charAt(i), !1);
    }
    return result;
}

$(document).ready(function () {
    $('#escape').on('click', function () {
        var input = $('#input');
        input.val(jsEscape(input.val())).select();
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.css

/* Global Styles */

@import url("https://fonts.googleapis.com/css?family=Fira+Code:400,600,700&display=swap");

:root {
--bg-color:#282c34;
--border-color:#343a47;
--text-color:#b6becc;
}

html,body {
background-color:var(--bg-color);
color:var(--text-color);
font-family:"Fira Code", arial, sans-serif;
font-size:100%;
height:100%;
line-height:1.45;
}

*,*::before,*::after { box-sizing:border-box; }
*:focus { outline:none; }

input::-moz-focus-inner,
input::-moz-focus-inner { border:0; padding:0; }

::selection {
background-color:var(--border-color);
color:var(--text-color);
}


/* Form */

form {
padding:3rem;
margin:0 auto;
max-width:1050px;
}

fieldset {
margin-bottom:3rem;
}

legend {
font-size:2rem;
font-weight:700;
margin-bottom:2rem;
}

label {
display:block;
font-weight:600;
letter-spacing:.02rem;
margin-bottom:.25rem;
}

input,
textarea {
appearance:none;
background:none;
}

textarea {
background-color:var(--bg-color);
border:1px solid var(--border-color);
color:var(--text-color);
display:block;
font-family:"Fira Code", arial, sans-serif;
font-size:1rem;
font-weight:400;
margin:0 0 1.25rem;
max-width:100%;
min-height:45vh;
padding:.65rem 1rem;
resize:vertical;
width:100%;
}

input[type="button"] {
background-color:var(--bg-color);
border:1px solid var(--border-color);
color:var(--text-color);
cursor:pointer;
display:inline-block;
font-family:"Fira Code", arial, sans-serif;
font-size:1rem;
font-weight:600;
line-height:normal;
padding:.65rem 1rem;
text-decoration:none;
}

input[type="button"]:hover,
input[type="button"]:focus {
background-color:var(--border-color);
}


/* Media */

@media only screen and (max-width:479px) {
     form {
     padding:2rem;
     }
}

test.html

<form>
    <fieldset>
        <legend>jsEscape</legend>
        <label for="input">Text to escape</label>
        <textarea id="input" spellcheck="false" autofocus></textarea>
        <input type="button" id="escape" value="Escape">
    </fieldset>
</form>