Online URL Encoder-Decoder
Sep 29, 2019 Update: Aug 28, 2021
Online tool for URLencoding plaintext and decoding URLencoded string to plaintext.
HTML
CSS
JavaScript
<div id="converter">
<div id="textareas">
<textarea id="input" placeholder="Input"></textarea>
<textarea id="output" placeholder="Output"></textarea>
</div>
<div id="converter-buttons">
<span>
<select id="conversion-type">
<option value="encode">URLencode</option>
<option value="decode">URLdecode</option>
</select>
<span id="special" style="margin-right: 10px">
<input type="checkbox" name="only-special" checked>Special characters only
</span>
<button id="convert">Convert</button>
</span>
</div>
</div>#converter {
margin-top: 30px;
}
#textareas {
display: flex;
flex-direction: row;
}
#converter textarea {
width: 50%;
padding: 5px;
min-height: 200px;
font-size: 14px;
color: #404040;
}
.applet-body {
border: none !important;
}
#converter-buttons {
display: flex;
justify-content: space-between;
margin-top: 5px;
}
#convert, #conversion-type {
font-size: 15px;
border-radius: 5px;
}document.querySelector('#convert').onclick = function() {
const inputMode = document.querySelector('#conversion-type').value;
const specialOnly = document.querySelector('input[name="only-special"]').checked;
let input = document.querySelector('#input').value;
if (!input) return;
let output = '';
if (inputMode === 'encode') {
if (specialOnly) {
output = encodeURIComponent(input);
} else {
output = percentEncode(input);
}
} else if (inputMode === 'decode') {
output = decodeURIComponent(input);
}
document.querySelector('#output').value = output;
}
document.querySelector('#conversion-type').onchange = function() {
const inputMode = document.querySelector('#conversion-type').value;
const special = document.querySelector('#special');
if (inputMode === 'encode') special.style.display = 'inline';
else special.style.display = 'none';
}
function percentEncode(string) {
let encoded = '';
string.split('').forEach(function(char) {
encoded += '%' + char.charCodeAt(0).toString(16).toUpperCase();
});
return encoded;
}