How to dynamically change a text from URL input?

Question

I want something like that..

https://pl.sports-streams-online.best/?st=nbastream.tv&plcm=db&q=Raptors+vs+Lakers

See that URL part q=Raptors+vs+Lakers, If i input any text on this section it will automatically change on website body. I want to know how i can do this. I will input a text in URL and it will display on website body.

Thanks for advance.

apena · Accepted Answer · 2020-08-11 19:23:41Z

1

You can parse window.location and put that into a div on your page. I can't show you in a code snippet because the snippets use an iframe but if your html has <div id='uText'></div> then you can use javascript (after the page has loaded) to set the value of that div with results of the query param. lets say your url ends in ?st=nbastream.tv&plcm=db&q=Raptors+vs+Lakers, then you want the value for parameter 'q':

function getQueryStringParam(param) {
  var url = window.location.toString();
  url.match(/\?(.+)$/);
  var params = RegExp.$1;
  params = params.split("&");
  var queryStringList = {};
  for(var i = 0; i < params.length; i++) {
    var tmp = params[i].split("=");
    queryStringList[tmp[0]] = unescape(tmp[1]);
  }
  return decodeURIComponent(queryStringList[param]);
}
let qParam = getQueryStringParam('q').split('+').join(' ');
const div = document.getElementById('uText');
div.innerHTML = qParam;

Check out the codepen here.

answered Aug 11, 2020 at 19:23

apena

2,34116 silver badges23 bronze badges

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

2 Comments

jone hans Over a year ago

Thanks apena. It worked!!!! If i want to add another parma name 'img" how to total code will be?

apena Over a year ago

The url would have something like &img=someimagename.jpg appended to it and the javascript would get that data something like this: let imgParam = getQueryStringParam('img').split('+').join(' '); you can leave out the .split().join() part if you know the img param value will not contain spaces.

Collectives™ on Stack Overflow

How to dynamically change a text from URL input?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related