how to Display content directly from url?

Question

i want it like this

my URL :example.com/text?name=stack-overflow

and i want page to be displayed like this

hello stack overflow

is it possible by only using JavaScript

i don't want to write all the code for the names i just want it to parse from the URL and print it in the page

i have tried looking at them other websites but the have written code for each variable

<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 dynamicContent = getParameterByName('dc');
 
     $(document).ready(function() {
 
        // Check if the URL parameter is apples
        if (dynamicContent == 'apples') {
            $('#apples').show();
        } 
        // Check if the URL parameter is oranges
        else if (dynamicContent == 'oranges') {
            $('#oranges').show();
        } 
        // Check if the URL parameter is bananas
        else if (dynamicContent == 'exe') {
            $('#bananas').show();
        } 
        // Check if the URL parmeter is empty or not defined, display default content
        else {
            $('#default-content').show();
        }
    });
</script>

Does this answer your question? [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Simone Rossaini, Jul 30 '20 at 11:41

score 2 · Answer 1 · answered Jul 30 '20 at 11:54

2

I guess something like this should work

const url = window.location.href
const params = url.searchParams;

document.getElementById("id of the text you wanna set value").innerHTML = params.get('name');

answered Jul 30 '20 at 11:54

codelch

33
7

score 1 · Answer 2 · answered Jul 30 '20 at 12:04

This should do it.

// the element you wish to update    
var titleTag = document.getElementById("title");
//the content from the url name=
var content = window.location.search.split("name=")[1] ? 
window.location.search.split("name=")[1] : "nothing in url please test it outside 
of the snippet window.location.search has no name=" ;
// update the element
titleTag.innerHTML = content;

<html>
<head></head>
<body>
<h1 id="title"></h1>
</body>
</html>

score 1 · Accepted Answer · answered Jul 30 '20 at 12:04

The ?name= part of your URL is a query string, so you need a way to extract the value assigned to this query string via JavaScript.

Actually the function - getParameterByName(name, url) - you posted in your question is almost everything you need. All you need to do is pass in the desired query string as a string "name" and it will return it's value.

To make use of what it's returning you can assign it to a HTML <span> element for example.

Here's an example:

<html>
  <head>
  </head>
  <body>
    <span id="myText"></span>
  </body>
  <script type="text/javascript">
    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, " "));
    }
    document.getElementById("myText").innerText = "Hello " + getParameterByName("name");
  </script>
</html>

how to Display content directly from url?

3 Answers3