Click here to Skip to main content
14,765,482 members
Articles » General Reading » Online Javascript Tools » General
Article
Posted 4 Aug 2015

Tagged as

Stats

31K views
3 bookmarked

JavaScript URL encode, decode and escape

Rate me:
Please Sign up or sign in to vote.
4.76/5 (5 votes)
4 Aug 2015CPOL
A simple utility that provides JavaScript URL encode, decode and escape functionality

This article may contain live JavaScript that has been reviewed and tested for security. If you wish to submit articles containing JavaScript please email your submissions to submit@codeproject.com.

Introduction

I was sick of having to look up the difference between urlencode, encodeURIComponent and escape, so here's a quick online tool for those who need it.

 

The Code

<script type="text/javascript">
    function Process() {

        var source = document.getElementById('text');
        var text   = "" + source.value;
        var target = document.getElementById("result");
        var result = "";

        if (document.getElementById('encode').checked === true) {
            result += "<h4>urlEncode</h4><p>" + urlencode(text) + "</p>";
            result += "<h4>encodeURI</h4><p>" + encodeURI(text) + "</p>";
            result += "<h4>encodeURIComponent</h4><p>" + encodeURIComponent(text) + "</p>";
            result += "<h4>escape</h4><p>" + escape(text) + "</p>";
        }
        else {
            result += "<h4>urldecode</h4><p>" + urldecode(text) + "</p>";
            result += "<h4>decodeURI</h4><p>" + decodeURI(text) + "</p>";
            result += "<h4>decodeURIComponent</h4><p>" + decodeURIComponent(text) + "</p>";
            result += "<h4>unescape</h4><p>" + unescape(text) + "</p>";
        }

        target.innerHTML = result;
    }

    function urlencode(text) {
        return encodeURIComponent(text).replace(/!/g,  '%21')
                                       .replace(/'/g,  '%27')
                                       .replace(/\(/g, '%28')
                                       .replace(/\)/g, '%29')
                                       .replace(/\*/g, '%2A')
                                       .replace(/%20/g, '+');
    }
    function urldecode(text) {
        return decodeURIComponent((text + '').replace(/\+/g, '%20'));
    }
</script>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Chris Maunder
Founder CodeProject
Canada Canada
Chris is the Co-founder, Administrator, Architect, Chief Editor and Shameless Hack who wrote and runs CodeProject. He is also co-founder of Developer Media and ContentLab.IO. He's been programming since the 80's and has been, in various guides, an astrophysicist, bacyard mechanic, mathematician, physicist, breeder of carnivorous plants, hydrologist, geomorphologist, defence intelligence researcher and then, when all that got a bit rough on the nerves, a web developer.

His programming experience includes C/C++, C#, SQL, MFC, ASP.NET, TypeScript and far, far too much FORTRAN. He has worked on PocketPCs, Old mainframes, new Macs, cheap phones, and a CRAY YMP C90 behemoth but finds notebooks take up less desk space.

He is kind to small animals and has a soft spot for cheesecake.

Chris was born and bred in Australia but splits his time between Toronto and Melbourne, depending on the weather. For relaxation he is obsessively into road cycling, physiology, occasionally snowboarding and rock climbing, and wishes he were a storm chaser.

Comments and Discussions

 
GeneralUseful Pin
DrABELL4-Aug-15 12:51
professionalDrABELL4-Aug-15 12:51 
Some time ago I was working on my IoT web app ('enRoute': Real-time NY City Bus Tracking Web App[^]). The Shuttle Bus Routes contains "+" symbol in Url, which I encoded (after couple try-errors) as %2B. So, I am testing it now using this online utility. For e.g. route S79+ Url is encoded/decoded correctly as mentioned. Good!
<lol>Life is 2short 2remove USB safely


modified 4-Aug-15 21:54pm.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.