JavaScript string conversion tool that escapes special characters and automatically selects the result.
A Pen by Mark Hillard on CodePen.
JavaScript string conversion tool that escapes special characters and automatically selects the result.
A Pen by Mark Hillard on CodePen.
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(); | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
/* 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; | |
} | |
} |
<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> |