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
– epascarello, Commented Aug 30, 2017 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
– David, Commented Aug 30, 2017 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
– Kukula Mula, Commented Aug 30, 2017 at 17:34
This is pretty much what you are looking for: stackoverflow.com/questions/15618470/… 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
– yuriy636, Commented Aug 30, 2017 at 17:42

Nine Magics · Accepted Answer · 2017-08-30 18:17:10Z

0

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

answered Aug 30, 2017 at 18:17

Nine Magics

7372 gold badges9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

spoofie · Accepted Answer · 2017-08-30 19:16:03Z

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, 2017 at 19:16

answered Aug 30, 2017 at 17:41

spoofie

1257 bronze badges

8 Comments

Kukula Mula Over a year ago

copy paste your code to my site and it didn't work - any ideas why?

Nine Magics Over a year ago

Probably because his remake of your function takes one parameter and the original two?

spoofie Over a year ago

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 Over a year ago

@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.

Kukula Mula Over a year ago

@spoofie The script does extract the url variable value (i.e Ryan) but it doesn't place it instead of ?? in 'username'

|

Collectives™ on Stack Overflow

How to add URL variable in HTML paragraph

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related