Develop Reference

how do i extract id parameter from an URL using reactjs

http://localhost:3000/messages/?qr_asset_id=1f6b997464&gts=1627828213
this is an URL, I need to extract the qr_asset_id value from this URL
how do I do this with reactjs

As you're using hooks based on your used tags:
const location = useLocation();
const urlParams = new URLSearchParams(location.search);
const paramValue = urlParams.get('qr_asset_id');

You pull it from the props. props.match.params.qr_asset_id

You can use URLSearchParams.
check for browser compatibility first
const url = window.location.href // "http://localhost:3000/messages/?qr_asset_id=1f6b997464&gts=1627828213";
const searchParams = new URLSearchParams(url);
const qrAssetId = searchParams.get("qr_asset_id"); // 1f6b997464
query parameter guide in react-router should help.
There are url-polyfill libraries out there too. You can use them to get the same result.
url-polyfill
whatwg-url

Grab query string value from URL using Javascript

I want to visit https://example.com/?GCLID=test123 and store whatever is in GCLID in a variable.
How do I do this? The following keeps returning null
var url = window.location.href;
// test
url = "https://example.com/?GCLID=test123";
const params = new URLSearchParams(url);
var gclid = params.get('GCLID');
alert(params);
alert(gclid);

You have to take the part after '?' in new URLSearchParams, see below
example for same, i.e you will pass window.location.search like this
const params = new URLSearchParams(window.location.search);
var url = window.location.href;
// test
url = "https://example.com/?GCLID=test123";
const params = new URLSearchParams(url.split('?')[1]);
var gclid = params.get('GCLID');
alert(params);
alert(gclid);

Trying to split following url

I'm trying to split following URL:
http://www.store.com/products.aspx/Books/The-happy-donkey
in order to get only store.
How can this be done?

To do something as generic as possible I'd do something like:
const url = new URL('http://www.store.com/products.aspx/Books/The-happy-donkey');
const { hostname } = url;
const domain = hostname.match(/^www\.(\w+)\.com/);
console.log(domain[1]);

Use below code
//window.location.href
let str = "http://www.store.com/products.aspx/Books/The-happy-donkey";
const words = str.split('.');
console.log(words[1]);

Javascript - query params from window.location.href

I'm new to Javascript syntax; sorry if this is too basic.
With this query:
const params = queryString.parse(window.location.href)
I am fetching:
{http://localhost:3000/#access_token: "accessToken", refresh_token: "refreshToken"}
and now I can easily do:
const refresh_token = params.refresh_token;
But how do I fetch "accessToken"?

It looks like the hash is malformed JSON. While it'd be parsable by adding a { to the left side, adding "s around word characters before a :, and JSON.parse-ing it:
// const { hash } = window.location;
// const badJSON = '{' + hash.slice(1);
// now, you'll have:
const badJSON = '{' + 'access_token: "accessToken", refresh_token: "refreshToken"}';
const json = badJSON.replace(/\w+(?=:)/g, '"$&"');
const obj = JSON.parse(json);
console.log(obj.access_token);
console.log(obj.refresh_token);
This is extremely awkward, and is a solution to an X/Y problem. It would be much better to fix whatever generates the URL so that its format is in the standard format so you can parse it with URLSearchParams. For example, the URL should be something like
http://localhost:3000/?access_token=accessToken&refresh_token=refreshToken
And then it can be parsed very easily:
const url = 'http://localhost:3000/?access_token=accessToken&refresh_token=refreshToken';
const params = new URLSearchParams(url.match(/\?.*/)[0]);
// in your real code, the above can be replaced with:
// const params = new URLSearchParams(window.location.search);
console.log(params.get('access_token'));

This did the trick:
getHashParams() {
const hashParams = {};
const r = /([^&;=]+)=?([^&;]*)/g;
const q = window.location.hash.substring(1);
let e = r.exec(q);
while (e) {
hashParams[e[1]] = decodeURIComponent(e[2]);
e = r.exec(q);
}
return hashParams;
}
and calling like so:
const params = this.getHashParams();
console.log(params);
logged:
{access_token: "aceessToken", refresh_token: "refreshToken"}

Removing query parameter using node.js not working

I am having this code to remove a query parameter from a url, but it is not working. Can you have a look please?
const url = require('url')
const obj = url.parse('http://www.example.com/path?query1=val1&query2=val2', true)
delete obj.query.query2
const link = url.format(obj)
console.log(link) // I was expecting the removal of query2 but it didn't happen
It logged the same url as was passed above, why query2 is not removed? Thanks

You need to remove search node from object
const obj = url.parse('http://www.example.com/path?query1=val1&query2=val2', true)
delete obj.query.query2
delete obj.search
const link = url.format(obj)
console.log(link)
This will return you url http://www.example.com/path?query1=val1

If you look at through the source for url module (https://github.com/defunctzombie/node-url/blob/master/url.js). You can see that
it will look at the search node first (line 413). Remove this as well, so that the query object is evaluated.
delete obj.search;

Even though you delete query2 from query object, query2 is still present in search field.
const url = require('url');
const obj = url.parse('http://www.example.com/path?query1=val1&query2=val2', true)
console.log(obj);
delete obj.query.query2
delete obj.search
console.log(obj);
const link = url.format(obj)
console.log(link)

const url = require("url")
const urlObj = url.parse('http://www.example.com/path?query1=val1&query2=val2', true)
delete urlObj.query.query2
delete urlObj.search
const newUrl = url.format(urlObj)
console.log(newUrl) // print >> http://www.example.com/path?query1=val1