EncodeURI is causing spaces to be read as %20, how do I change that in a simple way?

Question

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
body {
    background-color: #191616;
    margin: 0 auto;
    height: 100%;
    text-align: center;
}
nav {
    height: 35px;
    width: 100%;
    /** background: #84A2B2; **/
    font-size: 12pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    border-bottom: 1px solid #FF565D;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    height: 35px;
}
nav li {
    display: inline;
}
nav a {
    color: #FF565D;
    display: inline-block;
    width: 80px;
    text-align: center;
    text-decoration: none;
    line-height: 35px;
}

nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #1C1919;
    color: #FB776B;
}
nav a#pull {
    display: none;
}

#thetitle {
    width: 60%;
    min-height: 35px;
    background: #191616;
    border: 0;
    color: #FF565D;
    margin: 0 auto;
    padding: 20px;
    outline: none;
    resize: none;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;;
    font-size: 12pt;
    font-family: 'PT Sans', Arial, sans-serif;
}
#thenotes {
    width: 60%;
    min-height: 750px;
    background: #191616;
    border: 0;
    color: #FF565D;
    margin: 0 auto;
    padding: 20px;
    outline: none;
    resize: none;
    font-size: 12pt;
    font-family: 'PT Sans', Arial, sans-serif;
}
#thenotes::selection {
    background: ;
}

p a {
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    color: #FF565D;
    text-decoration: none;
}

    </style>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>
    <nav>
        <ul>
            <li><a href="#">FONT</a></li>
            <li><a href="#">COLOR</a></li>
            <li><a href="#">+</a></li>
            <li><a href="#">-</a></li>
            <li><a href="#"><b>B</b></a></li>
            <li><a href="#"><i>I</i></a></li>
            <li><a href="#"><u>U</u></a></li>
        </ul>
    </nav>

    <textarea contenteditable="yes"  id="thetitle" placeholder="Title..."></textarea>
    <textarea contenteditable="yes"  id="thenotes"></textarea>
<p><a class="saver" href="#">SAVE</a></p>

<script>
        var container = document.getElementById('thenotes');
        var containertitle = document.getElementById('thetitle');
        var anchor = document.querySelector(".saver");
        var dt = new Date();
        var time = dt.getFullYear() + ":" + dt.getMonth() + ":" + dt.getDay() + "   " + dt.getHours() + "." + dt.getMinutes() + "." + dt.getSeconds();


        anchor.onclick = function() {
    if ($('#thetitle').val() != '')
    {
        anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
        anchor.download = encodeURIComponent(containertitle.value); + '.txt';
    }
    else
    {
        anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
        anchor.download = time + '.txt';
    }

};
    </script>
</body>
</html>

So this is supposed to be a distract free notetaking page that should be used in fullscreen, I haven't yet gotten around to making the bold, italics, underline, font and color sections work which I will try to do soon but my main question is why it saves the file with the %20 in and not a simple space, and why the saved file won't break/skip a line in the saved txt file.

I sense sarcasm, but the bottom line is that you're misusing the function. It's to encode text into URI, so it'll be usable for things like HTTP requests. — manonthemat, Dec 15 '16 at 21:42
These encoded characters should not be in your saved file. And you probably don't need to encode the download attribute — Kaiido, Dec 15 '16 at 23:12

score 0 · Answer 1 · answered Dec 16 '16 at 08:54

Although you may see percent-encoded characters in the href attribute (as a result of using encodeURIComponent()), they will not appear in the downloaded file.

In the example below, the data contains percent-encoded characters, because that is how to properly escape characters in a href attribute. However, when you open the downloaded file, the text appears as it should.

<a href="data:text/plain;charset=utf-8,Some%20text%0D%0Ato%20save" 
   download="testfile.txt">
  Download
</a>

EncodeURI is causing spaces to be read as %20, how do I change that in a simple way?

1 Answers1