URL Encoding and Decoding Script
Some browsers, perhaps most of them, when they encounter a URL that needs encoding will go ahead and do it for you. But not all can be counted on to do that.
You can test your own browser by clicking this link (which is HTML-coded like below):
<a href="https://example.com?name=I am me">clicking this link</a>
If the browser takes you to the destination, the URL in the browser's address bar is likely to show this (perhaps using "+" instead of "%20" to represent a space):
https://example.com/?name=I%20am%20me
Certain characters are not allowed in a URL (all letters and numbers are safe, as are hyphens, periods, tildes, and underscores). Other specific characters have special meaning in URLs (like ?, &, =, and #) and only need to be encoded when they are used literally rather than for the special meaning.
The PHP script that accompanies this article is designed to encode text for use in URLs and to decode any URL-encoded text. The encoding can handle line feeds, tabs, utf-8 characters — any keyboard text you want to encode. Decoding handles whatever URL-encoding it is presented with.
An Illustration
The PHP script is stand-alone software. The source code for the software is further below. No customization is necessary. You upload the software to your server and access it with your browser.
Here is an illustration of how the PHP script works. Type "Will Bontrager" or any text with non-alphanumeric characters (such as a space, quotes, angle brackets, …) to see how it would be URL encoded.
URL Encode/Decode Illustration
- Type the content to encode or decode into the top text box.
- Tap the "Encode" or "Decode" button.
- The result appears in the text box below the buttons.
The PHP Script
This is the source code for the PHP script. Installation notes follow.
<?php
/*
URL Encode/Decode
Version 1.0
May 16, 2022
Will Bontrager Software LLC
https://www.willmaster.com/
*/
if( isset($_POST['content']) )
{
if(isset($_POST['type']) and strtolower(substr($_POST['type'],0,1))=='d'){echo(urldecode($_POST['content']));}
else { echo( rawurlencode($_POST['content']) ); }
exit;
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Encode/Decode</title>
<style type="text/css">
* { box-sizing:border-box; }
html, body { font-size:100%; font-family:sans-serif; }
input[type="button"]:hover { cursor:pointer; }
input[type="button"] { font-size:1rem; }
textarea {
font-size:1rem;
font-family:sans-serif;
margin:1em 0;
width:100%;
height:1in;
border:1px solid #ccc;
border-radius:.5em;
padding:.5em;
}
ul, ol { margin:0; }
li { margin-bottom:.3em;}
#content { max-width:500px; margin:.5in auto; }
</style>
</head>
<body><div id="content">
<h1><a href="https://www.willmaster.com/"><img src="https://www.willmaster.com/images/wmlogo_icon.gif" style="" alt="Willmaster logo"></a> URL Encode/Decode</h1>
<ol>
<li>Type the content to encode or decode into the top text box.</li>
<li>Tap the "Encode" or "Decode" button.</li>
<li>The result appears in the text box below the buttons.</li>
</ol>
<textarea id="input-content" placeholder="Type content to encode/decode here" onkeyup="ClearOutput()"></textarea>
<div style="float:left;"><input type="button" value="Encode" onclick="ConvertContent('Encode')"></div>
<div style="float:right;"><input type="button" value="Decode" onclick="ConvertContent('Decode')"></div>
<div style="clear:both;"></div>
<textarea id="output-content" placeholder="Encoded or decoded content will be placed here"></textarea>
<p>Copyright 2022 <a href="https://www.willmaster.com/">Will Bontrager Software LLC</a>
</div>
<script type="text/javascript">
function ClearOutput() { document.getElementById("output-content").value=""; }
function ConvertContent(w)
{
var http = new XMLHttpRequest();
if(! http) { echo("No internet connection."); return; }
var params = new Array();
params.push( "content=" + encodeURIComponent(document.getElementById("input-content").value) );
params.push( "type=" + w );
var data = params.join("&");
http.onreadystatechange = function()
{
if(http.readyState==4 && http.status==200) {document.getElementById("output-content").value=http.responseText;}
}
http.open("POST","<?php echo($_SERVER['PHP_SELF']) ?>",true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send(data);
}
</script>
</body>
</html>
Installation notes —
-
Save the above source code as
URLcode.php(or other appropriate*.phpfile name). -
Upload
URLcode.phpto your server and make a note of its URL.
To use the PHP script, type its URL into your browser.
How-to-Encode URLs
Use the PHP script to encode the parts of the URL that may require encoding. Then update the URL with the encoded parts.
-
Directory names and file names that contain characters other than letters, numbers, hyphens, periods, tildes, and underscores. Example:
https://example.com/my directory/my file.html (becomes encoded as) https://example.com/my%20directory/my%20file.html
For the above, the text
my directoryand the textmy file.htmlare encoded to construct the URL. -
In URL parameters (information following a "?" character), certain text may need encoding. That would be the text following the "?" in the URL. The "&" or "=" characters do not need encoding, but the text on each side of the "&" and "=" characters may. Example:
?my name=Will Bontrager&my focus=writing an article (becomes encoded as) ?my%20name=Will%20Bontrager&my%20focus=writing%20an%20article
For the above, each of these are encoded to construct the URL:
-
my name -
Will Bontrager -
my focus -
writing an article
-
As noted earlier, the PHP script will encode multi-line text. This feature may be useful when constructing mailto: links (links to open the person's email software and pre-fill certain information — assuming the browser settings know where to find the email software).
As an example, you may wish to pre-fill the email body content with something like this:
I really love this!!!!! It is the most wonderfulish thing I ever stumbled upon!!!!!
To implement that, and pre-fill the "to" address to name@example.com (we're assuming name@example.com), use this link template:
<a href="mailto:name@example.com?body=_______">send email</a>
Encode the body content and replace _______ with the encoded content.
<a href="mailto:name@example.com?body=I%20really%20love%20this%21%21%21%21%21%0A%0AIt%20is%20the%20most%20wonderfulish%20thing%20I%20ever%20stumbled%20upon%21%21%21%21%21">send email</a>
Now, tap here to see the working link in action.
The decoding part of the software generally is used to check if the correct data has been encoded or to see what data someone else's URL is really encoded with.
You may use the URL encoder/decoder illustration in this article to decode URLs and to help encode URLs. Or, you may install the PHP script on your server.
Either way, you are now equipped to encode and decode URLs.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
Was this article helpful to you?
(anonymous form)
All information in WillMaster Library articles is presented AS-IS.
We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.
