How to add URL variable in HTML paragraph

Question

I'm a newbie to HTML. I googled the question and tried some code but it didn't work so I'm asking here for help.

What I am trying to achieve: replacing the ?? in the HTML paragraph with a value from a URL (for example: http://mysite.html?name=Ryan)

<p> Hello ??<br> Thanks for answering my question</p>

My Questions: 1. This Javascript should extract Ryan from the URL - is it correct?

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    // Give the parameter a variable name
    var urlVar = getParameterByName('name');
});
</script>

If the code in Question 1 is correct, how do I place the value in urlVar (which is Ryan) instead of the ?? inside the HTML paragraph?

Would make more sense to have a span element with an id in the paragraph and replace it.... — epascarello, Aug 30 '17 at 17:33
Is `urlVar` the value you expect it to be or not? It's not really clear to me specifically what's being asked here. — David, Aug 30 '17 at 17:33
@yuriy636 I think the javascript code extracts **Ryan**, my question is how to place the value of **Ryan** inside the HTML paragraph so it will render on the browser: "Hello **Ryan**, Thanks for answering my quesiotn" — Kukula Mula, Aug 30 '17 at 17:34
This is pretty much what you are looking for: https://stackoverflow.com/questions/15618470/javascript-replace-html-using-innerhtml Only thing is that you would need to find a way to select the paragraph despite it not having an id or class. (Or adapt your HTML like the suggested comment or the answer below). — yuriy636, Aug 30 '17 at 17:42

spoofie · Answer 1 · 2017-08-30T19:16:03.683

0

I assume the HTML is already rendered, after which the javascript is being used.

In which case you need to have a handle to replace it.

 Hello ?? Thanks for answering my question

Now within the Javascript code you can use something like:

var urlVar = getParameterByName('name');
 document.getElementById('username').innerHTML = urlVar;

EDIT:  Hello ?? Thanks for answering my question

uses Jquery document.ready to execute the code after the DOM as been rendered

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
      // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    // Give the parameter a variable name
    var urlVar = getParameterByName('name');
    document.getElementById('username').innerHTML = urlVar;
});
</script>

edited Aug 30 '17 at 19:16

answered Aug 30 '17 at 17:41

spoofie

103
7

copy paste your code to my site and it didn't work - any ideas why? – Kukula Mula Aug 30 '17 at 17:52
Probably because his remake of your function takes one parameter and the original two? – Nine Magics Aug 30 '17 at 18:05
Not sure i might have made a mistake. Though within the code you posted i did see }); at the end of your code. its something that shouldn't if the code you posted is everything there is. Also your code is never executed if thats every thing you have. – spoofie Aug 30 '17 at 18:05
@NineMagics No his code can actually use only the 'name' parameter from what i can see. if no url is specified it takes the current url. – spoofie Aug 30 '17 at 18:11
@spoofie The script does extract the url variable value (i.e Ryan) but it doesn't place it instead of ?? in 'username' – Kukula Mula Aug 30 '17 at 18:29
I made an error, i wrote Elment instead of Element. within document.getElementById('username').innerHTML = urlVar; – spoofie Aug 30 '17 at 19:16
@spoofie finally solved it - not with `innerHTML` that didn't work for me instead I used `textContent` like this `document.getElementById("username").textContent=urlVar;` and it works – Kukula Mula Aug 30 '17 at 19:26
Great to hear that – spoofie Aug 30 '17 at 21:59

score 0 · Answer 2 · answered Aug 30 '17 at 18:17

Do you have a hashbang in the URL? You can try this out:

    function getParameterByName = function(name, useHash) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(useHash ? location.hash : location.search);
        return results === null ? undefined : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

Passing true or false as the useHash parameter

How to add URL variable in HTML paragraph

2 Answers2