Develop Reference

Split URL into params

I'm having trouble splitting the url into the following format for my URL.
Url = ?Point%20Cook-VIC-3030
desired format: Point Cook, VIC, 3030
So far I've tried the below to get rid of the "-" but I'm not sure how to get rid of the "?" and "%" and "20"
const url = "?Point%20Cook-VIC-3030"
const queryParams = url.split("-")
I tried using URLSearchParams but realized it doesn't have browser support for older browsers
which is a bummer

If your URL is encoded (due to space character) you need to properly decode it.
const url = '?Point%20Cook-VIC-3030';
// Decode URL and remove initial '?'
const decodedUrl = decodeURIComponent(url).substring(1);
// Split parameters
const paramerters = decodedUrl.split('-');

Parsing query parameters which has ampersand in its values

We are trying to parse query parameters for the below URL
https://example.com?a=a1&b=b1&cd=C&D&ef=E&F
We want the parameters to read as
a = a1
b = b1
cd = C&D
ef = E&F
Currently, we are using the below javascript
var url_string = "https://example.com?a=a1&b=b1&cd=C&D&ef=E&F";
var url = new URL(url_string);
var cd = url.searchParams.get("cd");
console.log(cd);
It reads the value of cd as C and not C&D
The issue is because the URL has an ampersand in the query parameter values.
How can I get the full value i.e. C&D for the query parameter cd ?

My recommendation would be to follow standard URLs; i.e. URL encode ? and &'s.
// & -> %26
// ? -> %3F
let urlStr = 'https://example.com?a=a%26b%3Fc';
let url = new URL(urlStr);
console.log(url.searchParams.get('a')); // a&b?c
Alternatively, if you must use incorrect URLs, then you'll have to resort to your own custom parser. Standard URL parsers will assume correctly formatted URLs. The problem with this approach of using incorrect URLs is you have no way to know for certain whether ?a=x&b means
1) the param a has value 'x&b', or
2) the param a has value 'x' and the param b has value '' (empty string). I.e., example.com/?b actually means something different than example.com, in the first case, param b has value empty string, in the 2nd there is no param b.

Is it possible to get this part of a string

I wonder if it's possible to get this part of a string.
Here is my string:
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
Now I want to be able to grab just this part of the string, the file name:
12391381_10205760647243398_2385261683139818614_n.jpg
I tried:
var result = /[^/]*$/.exec(""+url+"")[0];
, but it will return
user%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=4c92c4d7-8979-4478-a63d-ea190bec87cf
My Regex is wrong.
Another this is, the file extension can be .png or jpg so it's not fixed to jpg.

You could use a regex to isolate the part you want :
This works :
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
console.log((string.match(/[A-Za-z0-9_]+.(jpg|png|bmp)/))[0].substring(2));

Note that may have to be adapted depending on how much the URL string changes:
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
var out = string.split('?')[0].split('%2F')[2];
console.log(out); // "12391381_10205760647243398_2385261683139818614_n.jpg"

Assuming, you always have an url, first I would decode the encoded / (%2F) characters via:
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
var decodedUrl = decodeURIComponent(string);
and then use a regex:
decodedUrl.match(/[^/]*(?=[?])/)
Mind, that this regex assumes parameters (the part starting with ?...) are present, so if that's not the case, you might have to alter it to your needs.

If the filename always has a .jpg extension:
var url = decodeURIComponent(string);
var filename = url.substring(url.lastIndexOf("/")+1, url.lastIndexOf(".jpg"))
If not:
url = url.substring(url.lastIndexOf("/")+1)
filename = url.substring(0,url.indexOf("?"))

Looking at the string, it appears that the file name is between the second occurrence of "%2F" and the first occurrence of "?" in the string.
The first step is to get rid of the part of the string before the second "%2F". This can be done by splitting the string at every "%2F" and taking the third element in the resulting array.
var intermediate = string.split("%2F")[2]
Then, we need to get rid of everything after the "?":
var file_name = intermediate.split("?")[0]
This should give you the file name from the URL

Extend encodeURIComponent such as to skip some values from encoding

Having a URL such as .
var url = `damen/hosen-roecke/7%2F8-laenge`
While encoding
encodeURIComponent(url) it returns damen%2Fhosen-roecke%2F7%252F8-laenge
But I need to skip this particular part 7%2F8 from encoding which is already encoded once.
So I guess how to override encodeURIComponent so that it can skip this particular format '7%2F8'
So that it can work like after encoding it should return damen%2Fhosen-roecke%2F7%2F8-laenge

As the string contain some part that is encoded, first decode the string and then encode again.
encodeURIComponent(decodeURIComponent(url)) // "damen%2Fhosen-roecke%2F7%2F8-laenge"
var url = `damen/hosen-roecke/7%2F8-laenge`;
document.body.innerHTML = encodeURIComponent(decodeURIComponent(url));
Steps:
decodeURIComponent(url) will give completely decoded string "damen/hosen-roecke/7/8-laenge"
encodeURIComponent("damen/hosen-roecke/7/8-laenge") will give the "damen%2Fhosen-roecke%2F7%2F8-laenge" string.

Javascript replacing /, str.replace not working

I'm having a really stupid issue where javascript is replacing every '/' with '%2F' in a url. Here is what i have now:
var url;
url = $(this).val();
url = str.replace('%2F', '/');
window.location.href = $(this).val();
What have I done wrong here?

You need to decode the url to convert the special characters back to what they should be (like changing %2F back to /). To do this, you can use decodeURI:
url = $(this).val();
url = decodeURI(url);
However, sometimes spaces get replaced by + instead of %20. So, to handle these cases, you must replace all + with %20 before decoding your url.
url = $(this).val();
url = url.replace('+', '%20');
url = decodeURI(url);
And now url is the decoded version of the url.