URL Encoding Converter

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="yinq">
    <title></title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
</head>

<body>
<form action="#" class="clearfix" data-gtm-form-interact-id="0">
    <textarea id="data" class="encode-area" spellcheck="false" maxlength="2100" rows="4" data-gtm-form-interact-field-id="0">François</textarea>
    <input type="button" value="Encode" class="action-btn" onclick="encodeURL();">
    <input type="button" value="Decode" class="action-btn" onclick="decodeURL();">
</form>
<script type="text/javascript" src="http://www.itshubao.com/static/js/jquery.min.js"></script>
</body>
</html>

CSS

input, select, textarea, button, div, span, a {
    box-sizing: border-box;
}
.encode-area {
    width: 100%;
    resize: none;
    display: block;
    padding: 1px 5px;
    margin-bottom: 15px;
    overflow-y: auto;
    border: 1px solid #D2D2D2;
    font-size: 15px;
    font-family: inherit;
}
.action-btn {
    color: #fff;
    background: #1ebba3;
    border: none;
    border-radius: 1px;
    cursor: pointer;
    outline: none;
    transition: all .5s;
    font-size: 14px;
    line-height: normal;
    padding: 6px 15px;
    font-weight: 700;
    letter-spacing: .5px;
}

JavaScript

function encodeURL(){
    var str = $("#data").val();
    $("#data").val(encodeURIComponent(str));
}
function decodeURL(){
    var str = $("#data").val();
    $("#data").val(decodeURIComponent(str.replace(/\+/g, ' ')));
}