How to convert this QueryString to a JS Object? [NODEJS] - javascript

I have the following querystring which is a IPN by wirecard, so i can't modify this input, this is what i receive in the POST.
I have no clue why is this being sent as text/plain instead of application/json
https://doc.wirecard.com/GeneralPlatformFeatures.html#GeneralPlatformFeatures_IPN
response-signature-base64=sGwuDEpTnTB7XwzPga8DG+pYYjB3bga7YOZI8n26yOns=&response-signature-algorithm=HmacSHA256&response-base64=eyJwYXltZW50Ijp7InN0YXR1c2VzIjp7InN0YXR1cyI6W3siY29kZSI6Ij
IwMS4wMDAwIiwiZGVzY3JpcHRpb24iOiIzZC1hY3F1aXJlcjpUaGUgcmVzb3VyY2Ugd2FzIHN1Y2Nlc3NmdWxseSBjcmVhdGVkLiIsInNldmVyaXR5IjoiaW5mb3JtYXRpb24ifV19LCJjYXJkIjp7ImV4cGlyYXRpb24tbW9udGgiOjEsImV4cGl
yYXRpb24teWVhciI6MjAyMywiY2FyZC10eXBlIjoidmlzYSJ9LCJkZXNjcmlwdG9yIjoiIiwibm90aWZpY2F0aW9ucyI6eyJub3RpZmljYXRpb24iOlt7InVybCI6Imh0dHBzOi8vNDY0Yjk4N2M2ZDk5Lm5ncm9rLmlvL3B1YmxpY3Mvd2lyZWNh
cmQyIn1dLCJmb3JtYXQiOiJhcHBsaWNhdGlvbi9qc29uLXNpZ25lZCJ9LCJtZXJjaGFudC1hY2NvdW50LWlkIjp7InZhbHVlIjoiN2E2ZGQ3NGYtMDZhYi00ZjNmLWE4NjQtYWRjNTI2ODcyNzBhIn0sInRyYW5zYWN0aW9uLWlkIjoiOTQwNGIxN
jQtMTgzYy00ZjllLThmNGEtN2QzMGUxODA2ZWRjIiwicmVxdWVzdC1pZCI6Ijk3NzJiMzViLTdmYmUtNGYxZS04NmQ5LThhNjMwZDljZDg3YyIsInRyYW5zYWN0aW9uLXR5cGUiOiJwdXJjaGFzZSIsInRyYW5zYWN0aW9uLXN0YXRlIjoic3VjY2
VzcyIsImNvbXBsZXRpb24tdGltZS1zdGFtcCI6MTU5NTkyNDA0OTAwMCwicmVxdWVzdGVkLWFtb3VudCI6eyJ2YWx1ZSI6MTAsImN1cnJlbmN5IjoiVVNEIn0sImFjY291bnQtaG9sZGVyIjp7ImZpcnN0LW5hbWUiOiJkIiwibGFzdC1uYW1lIjo
iZCJ9LCJjYXJkLXRva2VuIjp7InRva2VuLWlkIjoiNDI0Mjc5NjQ0NDA5MDAxOCIsIm1hc2tlZC1hY2NvdW50LW51bWJlciI6IjQyMDAwMCoqKioqKjAwMTgifSwicGF5bWVudC1tZXRob2RzIjp7InBheW1lbnQtbWV0aG9kIjpbeyJuYW1lIjoi
Y3JlZGl0Y2FyZCJ9XX0sImF1dGhvcml6YXRpb24tY29kZSI6IjE0Mzk3NyIsImFwaS1pZCI6IndwcCIsImNhbmNlbC1yZWRpcmVjdC11cmwiOiJodHRwczovL2RlbW9zaG9wLXRlc3Qud2lyZWNhcmQuY29tL2RlbW9zaG9wLyMvY2FuY2VsIiwiZ
mFpbC1yZWRpcmVjdC11cmwiOiJodHRwczovL2RlbW9zaG9wLXRlc3Qud2lyZWNhcmQuY29tL2RlbW9zaG9wLyMvZXJyb3IiLCJzdWNjZXNzLXJlZGlyZWN0LXVybCI6Imh0dHBzOi8vZGVtb3Nob3AtdGVzdC53aXJlY2FyZC5jb20vZGVtb3Nob3
AvIy9zdWNjZXNzIiwicHJvdmlkZXItYWNjb3VudC1pZCI6IjcwMDEwIn19
As you can see the query parameters are base64 encoded, which is a problem because it includes + and = that are going to break if use URLSearchParams or any other method of converting .
I tried using bodyparser.urlencoded but this transforms '+' to ' '
how can i split this safely while keeping the 3 variables intact
response-signature-base64
response-signature-algorithm
response-base64

If the URL Web API available you could create a URL and read the searchParams from it.
If not you can use Javascripts split() function using the limit argument:
queryString.split('&').map((value) => value.split('=', 2));
if an array of arrays is not what you want you can append an other processing step and do something like this:
queryString
.split('&').map((value) => value.split('=', 2))
.reduce((obj, value) => {
obj[value[0]] = value[1];
return obj;
}, {});
the following snippet shows the code in action
const queryString = 'response-signature-base64=sGwuDEpTnTB7XwzPga8DG+pYYjB3bga7YOZI8n26yOns=&response-signature-algorithm=HmacSHA256&response-base64=eyJwYXltZW50Ijp7InN0YXR1c2VzIjp7InN0YXR1cyI6W3siY29kZSI6IjIwMS4wMDAwIiwiZGVzY3JpcHRpb24iOiIzZC1hY3F1aXJlcjpUaGUgcmVzb3VyY2Ugd2FzIHN1Y2Nlc3NmdWxseSBjcmVhdGVkLiIsInNldmVyaXR5IjoiaW5mb3JtYXRpb24ifV19LCJjYXJkIjp7ImV4cGlyYXRpb24tbW9udGgiOjEsImV4cGlyYXRpb24teWVhciI6MjAyMywiY2FyZC10eXBlIjoidmlzYSJ9LCJkZXNjcmlwdG9yIjoiIiwibm90aWZpY2F0aW9ucyI6eyJub3RpZmljYXRpb24iOlt7InVybCI6Imh0dHBzOi8vNDY0Yjk4N2M2ZDk5Lm5ncm9rLmlvL3B1YmxpY3Mvd2lyZWNhcmQyIn1dLCJmb3JtYXQiOiJhcHBsaWNhdGlvbi9qc29uLXNpZ25lZCJ9LCJtZXJjaGFudC1hY2NvdW50LWlkIjp7InZhbHVlIjoiN2E2ZGQ3NGYtMDZhYi00ZjNmLWE4NjQtYWRjNTI2ODcyNzBhIn0sInRyYW5zYWN0aW9uLWlkIjoiOTQwNGIxNjQtMTgzYy00ZjllLThmNGEtN2QzMGUxODA2ZWRjIiwicmVxdWVzdC1pZCI6Ijk3NzJiMzViLTdmYmUtNGYxZS04NmQ5LThhNjMwZDljZDg3YyIsInRyYW5zYWN0aW9uLXR5cGUiOiJwdXJjaGFzZSIsInRyYW5zYWN0aW9uLXN0YXRlIjoic3VjY2VzcyIsImNvbXBsZXRpb24tdGltZS1zdGFtcCI6MTU5NTkyNDA0OTAwMCwicmVxdWVzdGVkLWFtb3VudCI6eyJ2YWx1ZSI6MTAsImN1cnJlbmN5IjoiVVNEIn0sImFjY291bnQtaG9sZGVyIjp7ImZpcnN0LW5hbWUiOiJkIiwibGFzdC1uYW1lIjoiZCJ9LCJjYXJkLXRva2VuIjp7InRva2VuLWlkIjoiNDI0Mjc5NjQ0NDA5MDAxOCIsIm1hc2tlZC1hY2NvdW50LW51bWJlciI6IjQyMDAwMCoqKioqKjAwMTgifSwicGF5bWVudC1tZXRob2RzIjp7InBheW1lbnQtbWV0aG9kIjpbeyJuYW1lIjoiY3JlZGl0Y2FyZCJ9XX0sImF1dGhvcml6YXRpb24tY29kZSI6IjE0Mzk3NyIsImFwaS1pZCI6IndwcCIsImNhbmNlbC1yZWRpcmVjdC11cmwiOiJodHRwczovL2RlbW9zaG9wLXRlc3Qud2lyZWNhcmQuY29tL2RlbW9zaG9wLyMvY2FuY2VsIiwiZmFpbC1yZWRpcmVjdC11cmwiOiJodHRwczovL2RlbW9zaG9wLXRlc3Qud2lyZWNhcmQuY29tL2RlbW9zaG9wLyMvZXJyb3IiLCJzdWNjZXNzLXJlZGlyZWN0LXVybCI6Imh0dHBzOi8vZGVtb3Nob3AtdGVzdC53aXJlY2FyZC5jb20vZGVtb3Nob3AvIy9zdWNjZXNzIiwicHJvdmlkZXItYWNjb3VudC1pZCI6IjcwMDEwIn19'
const result = queryString
.split('&').map((value) => value.split('=', 2))
.reduce((obj, value) => {
obj[value[0]] = value[1];
return obj;
}, {});
console.log(result)

ALMOST, but not quite, using this code
function fromBinary(binary) {
console.log(binary.length)
if (binary.length%2 != 0) binary += "="; // my hack - may not work
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < bytes.length; i++) {
bytes[i] = binary.charCodeAt(i);
}
return String.fromCharCode(...new Uint16Array(bytes.buffer));
};
const str = `response-signature-base64=sGwuDEpTnTB7XwzPga8DG+pYYjB3bga7YOZI8n26yOns=&response-signature-algorithm=HmacSHA256&response-base64=eyJwYXltZW50Ijp7InN0YXR1c2VzIjp7InN0YXR1cyI6W3siY29kZSI6Ij
IwMS4wMDAwIiwiZGVzY3JpcHRpb24iOiIzZC1hY3F1aXJlcjpUaGUgcmVzb3VyY2Ugd2FzIHN1Y2Nlc3NmdWxseSBjcmVhdGVkLiIsInNldmVyaXR5IjoiaW5mb3JtYXRpb24ifV19LCJjYXJkIjp7ImV4cGlyYXRpb24tbW9udGgiOjEsImV4cGl
yYXRpb24teWVhciI6MjAyMywiY2FyZC10eXBlIjoidmlzYSJ9LCJkZXNjcmlwdG9yIjoiIiwibm90aWZpY2F0aW9ucyI6eyJub3RpZmljYXRpb24iOlt7InVybCI6Imh0dHBzOi8vNDY0Yjk4N2M2ZDk5Lm5ncm9rLmlvL3B1YmxpY3Mvd2lyZWNh
cmQyIn1dLCJmb3JtYXQiOiJhcHBsaWNhdGlvbi9qc29uLXNpZ25lZCJ9LCJtZXJjaGFudC1hY2NvdW50LWlkIjp7InZhbHVlIjoiN2E2ZGQ3NGYtMDZhYi00ZjNmLWE4NjQtYWRjNTI2ODcyNzBhIn0sInRyYW5zYWN0aW9uLWlkIjoiOTQwNGIxN
jQtMTgzYy00ZjllLThmNGEtN2QzMGUxODA2ZWRjIiwicmVxdWVzdC1pZCI6Ijk3NzJiMzViLTdmYmUtNGYxZS04NmQ5LThhNjMwZDljZDg3YyIsInRyYW5zYWN0aW9uLXR5cGUiOiJwdXJjaGFzZSIsInRyYW5zYWN0aW9uLXN0YXRlIjoic3VjY2
VzcyIsImNvbXBsZXRpb24tdGltZS1zdGFtcCI6MTU5NTkyNDA0OTAwMCwicmVxdWVzdGVkLWFtb3VudCI6eyJ2YWx1ZSI6MTAsImN1cnJlbmN5IjoiVVNEIn0sImFjY291bnQtaG9sZGVyIjp7ImZpcnN0LW5hbWUiOiJkIiwibGFzdC1uYW1lIjo
iZCJ9LCJjYXJkLXRva2VuIjp7InRva2VuLWlkIjoiNDI0Mjc5NjQ0NDA5MDAxOCIsIm1hc2tlZC1hY2NvdW50LW51bWJlciI6IjQyMDAwMCoqKioqKjAwMTgifSwicGF5bWVudC1tZXRob2RzIjp7InBheW1lbnQtbWV0aG9kIjpbeyJuYW1lIjoi
Y3JlZGl0Y2FyZCJ9XX0sImF1dGhvcml6YXRpb24tY29kZSI6IjE0Mzk3NyIsImFwaS1pZCI6IndwcCIsImNhbmNlbC1yZWRpcmVjdC11cmwiOiJodHRwczovL2RlbW9zaG9wLXRlc3Qud2lyZWNhcmQuY29tL2RlbW9zaG9wLyMvY2FuY2VsIiwiZ
mFpbC1yZWRpcmVjdC11cmwiOiJodHRwczovL2RlbW9zaG9wLXRlc3Qud2lyZWNhcmQuY29tL2RlbW9zaG9wLyMvZXJyb3IiLCJzdWNjZXNzLXJlZGlyZWN0LXVybCI6Imh0dHBzOi8vZGVtb3Nob3AtdGVzdC53aXJlY2FyZC5jb20vZGVtb3Nob3
AvIy9zdWNjZXNzIiwicHJvdmlkZXItYWNjb3VudC1pZCI6IjcwMDEwIn19`
console.log([...new URLSearchParams(str).values()].map(val => fromBinary(atob(val))))

Related

how to convert {obj:"{objects}"} into array with json object inside it

I had % in my cookie and I found following code for it and got the data below after implying that code
var cookies = (document.cookie);
var output = {};
cookies.split(/\s*;\s*/).forEach(function (pair) {
pair = pair.split(/\s*=\s*/);
var name = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair.splice(1).join('='));
output[name] = value;
});
console.log(output);
The data console is down below;
{"objName":"[{"key":1,"key2":"value 123","key3":"value123"},{"key":1,"key2":"value 123","key3":"value123"}]"}
I have the data as shown above, What I want is to objName into array and remove "" from in front of [] array barckets
objName=[{"key":1,"key2":"value 123","key3":"value123"},{"key":1,"key2":"value 123","key3":"value123"}]
As far as I understand, you are trying to get cookie values, you can try this code and handle the returned array as you need. You can try this solution and let me know if it works.
var cookies = document.cookie.split(';').reduce(
(cookies, cookie) => {
const [name, val] = cookie.split('=').map(c => c.trim());
cookies[name] = val;
return cookies;
}, {});
console.log(cookies);

Implementing TLV in javascript

I am trying to implement TLV for e-invoice in Javascript. I am able to convert the values to hex and from hex to base64. When I add the base64 value to the QRcode and try to test it, I get an error telling me there is something wrong with my data. Below is my implementation
const __toString = (tag, value) => {
const tagToHex = "0"+(tag).toString(16)
const valueLengthToHex = value.length <= 15 ? "0" + (value.length).toString(16) :(value.length).toString(16)
const valueToHex = this.toHex(value)
return `${tagToHex}${valueLengthToHex}${valueToHex}`;
}
const toHex = (str) => {
let result = '';
for (let i=0; i<str.length; i++) {
result += str.charCodeAt(i).toString(16);
}
return result;
}
Entry point
const generateString = [
__toString(1, 'Bobs Records'),
__toString(2, '310122393500003'),
__toString(3, '2022-04-25T15:30:00Z'),
__toString(4, '1000.00'),
__toString(5, '150.00'),
];
return btoa(generateString.join(''))
MDEwYzQyNmY2MjczMjA1MjY1NjM2ZjcyNjQ3MzAyMGYzMzMxMzAzMTMyMzIzMzM5MzMzNTMwMzAzMDMwMzMwMzE0MzIzMDMyMzIyZDMwMzQyZDMyMzU1NDMxMzUzYTMzMzAzYTMwMzA1YTA0MDczMTMwMzAzMDJlMzAzMDA1MDYzMTM1MzAyZTMwMzA=
I get the base64 string above. When I set it as the value of the qrcode and try to scan it, I get errors and I do not know where I am missing it.
I was able to use this NPM package npm i --save #axenda/zatca to solve the problem. For more info, visit this page https://github.com/axenda/zatca

JSON route matching via regex

Consider I have following JSON object
var urls = {
"GET/users/:id":1,
"POST/users":0
}
and if I have string "GET/users/10". How can I use this as key to get the value from urls JSON i.e. "GET/users/10" should match "GET/users/:id".
I don't want to iterate urls JSON and use regex for every key.
Is there a way to access JSON object using regex?
Thanks in advance.
Here is something that should work for you. I took some of the pieces from the Durandal router's RegEx matching logic which basically dynamically creates a regular expression object based on a defined route string and then tests with it against a passed string.
Here is the working example:
var urls = {
"GET/users/:id": 1,
"POST/users": 0
}
const getRouteRegExp = (
routeString,
routesAreCaseSensitive = false,
optionalParam = /\((.*?)\)/g,
namedParam = /(\(\?)?:\w+/g,
splatParam = /\*\w+/g,
escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g
) => {
routeString = routeString.replace(escapeRegExp, '\\$&')
.replace(optionalParam, '(?:$1)?')
.replace(namedParam, function(match, optional) {
return optional ? match : '([^\/]+)';
})
.replace(splatParam, '(.*?)');
return new RegExp('^' + routeString + '$', routesAreCaseSensitive ? undefined : 'i');
}
const getRouteByString = (string) => {
var resultArr = Object.entries(urls).find(([k, v]) => {
var regEx = getRouteRegExp(k)
return regEx.test(string)
}) || []
return resultArr[0]
}
console.log(getRouteByString('GET/users/10'))
console.log(getRouteByString('POST/users'))
console.log(getRouteByString('POST/users2'))
So what you have is the getRouteRegExp function which is the main thing here which would compose a regular expression object based on a passed route.
After that we go and for each existing route defined in urls we create one RegExp and try to match it against the provided string route. This is what the find does. If one is found we return it.
Since we are doing Object.entries we return the 0 index which contains the result.
Since this comes straight from the Durandal bits it supports all the route expressions that are built in Durandal ... like:
Static route: tickets
Parameterized: tickets/:id
Optional Parameter: users(/:id)
Splat Route: settings*details
You can read more about Durandal Router here
From your question what I can understand is your key is dynamic, so you can do something like this:
var urls = {
"GET/users/:id":1,
"POST/users":0
}
let id = 10
const yourValue = urls["GET/users/" + id]
You can use this code to
var urls = {
"GET/users/:id":1,
"POST/users":0
}
var regex = /"([^"]+?)"\s*/g;
var urlsJson = JSON.stringify(urls);
let result = regex.exec(urlsJson)
if(result && result.length > 0) {
var keyJson = result[1];
var value = urls[keyJson]
console.log('value', value)
}
Try Something like this:
const urls = (id) => ({
[`GET/users/${id}`]:1,
"POST/users":0,
});
console.log(urls(2));
I hope it may be helpful.
The json would look fine, just do a replace on the url, so replace the ending integer with :id and then you have the key by which you can directly access the value in the json.
So:
var url = "GET/users/10";
var urls = {
"GET/users/:id":1,
"POST/users":0
}
url = url.replace(/users\/\d+/, 'users/:id');
console.log(urls[url]);
Do as many replaces on the url to convert all possible url's to the keys in your json.

Node.js How To serialize colon separated key value pairs to JSON

Given (as a post response body):
RESULT: OK
RESULT_PS: FINISHED
RESULT_CODE: 000
I need to serialize it to json, I use node's request to get this from server.
Surely I can parse it string by string.
But isn't there an easier way?
Maybe ready serializer or something to serialize such data to JSON?
What format is this?
filter each line from following code
var jsonObject = {}
function parser(str){
var arr = str.split(":");
jsonObject[arr[0]] = arr[1];
}
your final jsonObject is json you needed.
Make sure that you need to pass RESULT: OK, RESULT_PS: FINISHED,RESULT_CODE: 000 as seperate strings from parser.
As far as I can tell, this is just a delimited plain text response. (Where are you getting it from? Transaction response?) However, since it's that simple it's easily parseable with a quick map-reduce operation.
function trim(str) {
return str.replace(/^\s+|\s+$/g, "");
}
function nonEmpty(str) {
return null != str && str.length > 0;
}
function splitKeyValue(row) {
var tokens = row.split(":").map(trim);
// My assumption that a row should only contain 2 colon separated tokens
if (tokens.length > 2) {
throw new Error("Malformed row: " + row);
}
return tokens;
}
function merge(acc, item) {
// Normalise key to lower case, to guarantee spelling
acc[item[0].toLowerCase()] = item[1];
return acc;
}
function parseResponse(payload) {
return payload.split("\n").
filter(nonEmpty).
map(splitKeyValue).
reduce(merge, {});
}
Using the snippet of code above, the result should be:
var payload =
"RESULT: OK\n" +
"RESULT_PS: FINISHED\n" +
"RESULT_CODE: 000\n";
var parsed = parseResponse(payload);
console.log(parsed);
// Output:
// {
// result: "OK",
// result_ps: "FINISHED",
// result_code: "000"
// }
// Each separate field is then accessible from it's name
console.log(parsed.result); // Output: "OK"
Ok, didn't find any ready solution.
So wrote this function:
parseResponse = function(response) {
var result = { };
response.replace(/([^\s:]+)\s*:\s*([^\n\s]+)/gi, function() {
var key = arguments[1], value = decodeURIComponent(arguments[2]);
result[key] = !isNaN(parseFloat(value)) && isFinite(value) ? parseFloat(value) : value;
});
return result;
}
If you use node.js there is handy module called querystring:
const querystring = require('querystring'),
payload =
"RESULT: OK\n\r" +
"RESULT_PS: FINISHED\n" +
"RESULT_CODE: 000\n";
let parsed = querystring.parse(payload, '\n', ':', {decodeURIComponent: s => s.trim()});
console.log(parsed);
For browsers there is a lot of good methods described in answers. Here is another one (vanilla JS):
var payload =
"RESULT: OK\n\r" +
"RESULT_PS: FINISHED\n" +
"RESULT_CODE: 000\n";
var browserParsed = payload.split("\n")
.map(function (s) {
return s.trim().split(":");
})
.filter(function (s) {
return s.length && s.length > 1;
})
.reduce(function (acc, c) {
acc[ c[ 0 ].trim() ] = c[ 1 ].trim();
return acc;
}, {});
console.log(browserParsed);

How to obtain the query string from the current URL with JavaScript?

I have URL like this:
http://localhost/PMApp/temp.htm?ProjectID=462
What I need to do is to get the details after the ? sign (query string) - that is ProjectID=462. How can I get that using JavaScript?
What I've done so far is this:
var url = window.location.toString();
url.match(?);
I don't know what to do next.
Have a look at the MDN article about window.location.
The QueryString is available in window.location.search.
If you want a more convenient interface to work with, you can use the searchParams property of the URL interface, which returns a URLSearchParams object. The returned object has a number of convenient methods, including a get-method. So the equivalent of the above example would be:
let params = (new URL(document.location)).searchParams;
let name = params.get("name");
The URLSearchParams interface can also be used to parse strings in a querystring format, and turn them into a handy URLSearchParams object.
let paramsString = "name=foo&age=1337"
let searchParams = new URLSearchParams(paramsString);
searchParams.has("name") === true; // true
searchParams.get("age") === "1337"; // true
The URLSearchParams interface is now widely adopted in browsers (95%+ according to Can I Use), but if you do need to support legacy browsers as well, you can use a polyfill.
Use window.location.search to get everything after ? including ?
Example:
var url = window.location.search;
url = url.replace("?", ''); // remove the ?
alert(url); //alerts ProjectID=462 is your case
decodeURI(window.location.search)
.replace('?', '')
.split('&')
.map(param => param.split('='))
.reduce((values, [ key, value ]) => {
values[ key ] = value
return values
}, {})
If you happened to use Typescript and have dom in your the lib of tsconfig.json, you can do:
const url: URL = new URL(window.location.href);
const params: URLSearchParams = url.searchParams;
// get target key/value from URLSearchParams object
const yourParamValue: string = params.get('yourParamKey');
// To append, you can also leverage api to avoid the `?` check
params.append('newKey', 'newValue');
You can use this for direct find value via params name.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
This will add a global function to access to the queryString variables as a map.
// -------------------------------------------------------------------------------------
// Add function for 'window.location.query( [queryString] )' which returns an object
// of querystring keys and their values. An optional string parameter can be used as
// an alternative to 'window.location.search'.
// -------------------------------------------------------------------------------------
// Add function for 'window.location.query.makeString( object, [addQuestionMark] )'
// which returns a queryString from an object. An optional boolean parameter can be
// used to toggle a leading question mark.
// -------------------------------------------------------------------------------------
if (!window.location.query) {
window.location.query = function (source) {
var map = {};
source = source || this.search;
if ("" != source) {
var groups = source, i;
if (groups.indexOf("?") == 0) {
groups = groups.substr(1);
}
groups = groups.split("&");
for (i in groups) {
source = groups[i].split("=",
// For: xxx=, Prevents: [xxx, ""], Forces: [xxx]
(groups[i].slice(-1) !== "=") + 1
);
// Key
i = decodeURIComponent(source[0]);
// Value
source = source[1];
source = typeof source === "undefined"
? source
: decodeURIComponent(source);
// Save Duplicate Key
if (i in map) {
if (Object.prototype.toString.call(map[i]) !== "[object Array]") {
map[i] = [map[i]];
}
map[i].push(source);
}
// Save New Key
else {
map[i] = source;
}
}
}
return map;
}
window.location.query.makeString = function (source, addQuestionMark) {
var str = "", i, ii, key;
if (typeof source == "boolean") {
addQuestionMark = source;
source = undefined;
}
if (source == undefined) {
str = window.location.search;
}
else {
for (i in source) {
key = "&" + encodeURIComponent(i);
if (Object.prototype.toString.call(source[i]) !== "[object Array]") {
str += key + addUndefindedValue(source[i]);
}
else {
for (ii = 0; ii < source[i].length; ii++) {
str += key + addUndefindedValue(source[i][ii]);
}
}
}
}
return (addQuestionMark === false ? "" : "?") + str.substr(1);
}
function addUndefindedValue(source) {
return typeof source === "undefined"
? ""
: "=" + encodeURIComponent(source);
}
}
Enjoy.
You can simply use URLSearchParams().
Lets see we have a page with url:
https://example.com/?product=1&category=game
On that page, you can get the query string using window.location.search and then extract them with URLSearchParams() class.
const params = new URLSearchParams(window.location.search)
console.log(params.get('product')
// 1
console.log(params.get('category')
// game
Another example using a dynamic url (not from window.location), you can extract the url using URL object.
const url = new URL('https://www.youtube.com/watch?v=6xJ27BtlM0c&ab_channel=FliteTest')
console.log(url.search)
// ?v=6xJ27BtlM0c&ab_channel=FliteTest
This is a simple working snippet:
const urlInput = document.querySelector('input[type=url]')
const keyInput = document.querySelector('input[name=key]')
const button = document.querySelector('button')
const outputDiv = document.querySelector('#output')
button.addEventListener('click', () => {
const url = new URL(urlInput.value)
const params = new URLSearchParams(url.search)
output.innerHTML = params.get(keyInput.value)
})
div {
margin-bottom: 1rem;
}
<div>
<label>URL</label> <br>
<input type="url" value="https://www.youtube.com/watch?v=6xJ27BtlM0c&ab_channel=FliteTest">
</div>
<div>
<label>Params key</label> <br>
<input type="text" name="key" value="v">
</div>
<div>
<button>Get Value</button>
</div>
<div id="output"></div>
You can use this function, for split string from ?id=
function myfunction(myvar){
var urls = myvar;
var myurls = urls.split("?id=");
var mylasturls = myurls[1];
var mynexturls = mylasturls.split("&");
var url = mynexturls[0];
alert(url)
}
myfunction(window.top.location.href);
myfunction("http://www.myname.com/index.html?id=dance&emp;cid=in_social_facebook-hhp-food-moonlight-influencer_s7_20160623");
here is the fiddle
window.location.href.slice(window.location.href.indexOf('?') + 1);
You can use the search property of the window.location object to obtain the query part of the URL. Note that it includes the question mark (?) at the beginning, just in case that affects how you intend to parse it.
You should take a look at the URL API that has helper methods to achieve this in it as the URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
This is not currently supported by all modern browsers, so don't forget to polyfill it (Polyfill available using https://qa.polyfill.io/).
var queryObj = {};
if(url.split("?").length>0){
var queryString = url.split("?")[1];
}
now you have the query part in queryString
First replace will remove all the white spaces, second will replace all the '&' part with "," and finally the third replace will put ":" in place of '=' signs.
queryObj = JSON.parse('{"' + queryString.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
So let say you had a query like abc=123&efg=456. Now before parsing, your query is being converted into something like {"abc":"123","efg":"456"}. Now when you will parse this, it will give you your query in json object.
8 years later, for a one-liner
const search = Object.fromEntries(new URLSearchParams(location.search));
Down-side, it does NOT work with IE11
To explain
The URLSearchParams interface defines utility methods to work with the query string of a URL. (From , https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
The Object.fromEntries() method transforms a list of key-value pairs into an object. (From, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)
// For https://caniuse.com/?search=fromEntries
> Object.fromEntries(new URLSearchParams(location.search))
> {search: "fromEntries"}
Convert that into array then split with '?'
var url= 'http://localhost/PMApp/temp.htm?ProjectID=462';
url.split('?')[1]; //ProjectID=462
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;
Try this one
/**
* Get the value of a querystring
* #param {String} field The field to get the value of
* #param {String} url The URL to get the value from (optional)
* #return {String} The field value
*/
var getQueryString = function ( field, url ) {
var href = url ? url : window.location.href;
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
var string = reg.exec(href);
return string ? string[1] : null;
};
Let’s say your URL is http://example.com&this=chicken&that=sandwich. You want to get the value of this, that, and another.
var thisOne = getQueryString('this'); // returns 'chicken'
var thatOne = getQueryString('that'); // returns 'sandwich'
var anotherOne = getQueryString('another'); // returns null
If you want to use a URL other than the one in the window, you can pass one in as a second argument.
var yetAnotherOne = getQueryString('example', 'http://another-example.com&example=something'); // returns 'something'
Reference
I think it is way more safer to rely on the browser than any ingenious regex:
const parseUrl = function(url) {
const a = document.createElement('a')
a.href = url
return {
protocol: a.protocol ? a.protocol : null,
hostname: a.hostname ? a.hostname : null,
port: a.port ? a.port : null,
path: a.pathname ? a.pathname : null,
query: a.search ? a.search : null,
hash: a.hash ? a.hash : null,
host: a.host ? a.host : null
}
}
console.log( parseUrl(window.location.href) ) //stacksnippet
//to obtain a query
console.log( parseUrl( 'https://example.com?qwery=this').query )
This will return query parameters as an associative array
var queryParams =[];
var query= document.location.search.replace("?",'').split("&");
for(var i =0; i< query.length; i++)
{
if(query[i]){
var temp = query[i].split("=");
queryParams[temp[0]] = temp[1]
}
}
For React Native, React, and For Node project, below one is working
yarn add query-string
import queryString from 'query-string';
const parsed = queryString.parseUrl("https://pokeapi.co/api/v2/pokemon?offset=10&limit=10");
console.log(parsed.offset) will display 10

Categories

Resources