JavaScript DecodeURIComponent and .replace() not removing %20 from URL

Question

I have a location property in my URL that I want to be used as the header on my website.

My current URL looks like this: http://localhost:37675/Directory/Home?location=Carol%20Stream

This is my header:

<h2 id="cookie1" class="col-xs-offset-2 col-xs-10 col-sm-offset-4 col-sm-4 col-md-offset-5 col-md-3"></h2>

When I use this JavaScript code:

    (function () {

        var myParam = location.search.split('location=')[1];
        myParam.replace(/%20/g, ' ');
        document.getElementById("cookie1").innerHTML = myParam;

    })();

My header looks like this:

When I use this java script code:

    (function () {

        var myParam = location.search.split('location=')[1];
        decodeURIComponent(myParam);
        document.getElementById("cookie1").innerHTML = myParam;

    })();

My header still looks like this:

Why do neither .replace or DecodeURIComponent work in replacing the %20 in my URL with a space?

I have looked at these stack exchange posts and none have worked for me:

Javascript replace all "%20" with a space

Javascript - Replace '%20' spaces

JavaScript how to replace %20 to space

Answer 1

Since I am using MVC I ended up adding the location to the view bag.

Right before I return the view in my controller I added:

ViewBag.location = location;

And changed my JavaScript to this:

    //function to retrieve location and place it in the header
    (function () {

        var location = "@ViewBag.location";

        //checks location length and if it is empty print "All Contacts" to the header else it prints the locaiton
        document.getElementById("cookie1").innerHTML = (location.length > 0)? location : "All Contacts" ;

    })();