Onclick open URL from the "parent" URL


#1

HI !

I have a complex URL : I will call it "Parent URL"

Parent URL = URL1+random-text+URL-I-need

I would like...on click on the link/Parent URL, to open ONLY the 'URL-I-need' NOT the Parent URL (or URL1). Is it possible ?

Thank you .


#2

If you know the pattern to build the parent URL, you can reverse it to get the child URL.


#3

Sorry...I'm afraid I don't understand...:frowning:

Example:
Parent URL = http://site1.com/?3Tb81tLFetv...URL-I-need

  • Onclick on link/Parent URL I want to open the page with the URL-I-need, NOT the the page with the Parent URL ...maybe using a "pattern" from http://site1.com/...

#4
var url_i_need = parent_url.split('...')[1]

in case ... is not meant literally, you should say so and not provide an incomplete example.


#5

So what you want is actually not a part of the URL but a query string parameter? In that case you might use URLSearchParams to get the desired value...

myLink.addEventListener('click', event => {
  const params = new URLSearchParams(event.target.search)

  event.preventDefault()
  window.location = params.get('name_of_param')
})

If this is the case, you might want to decode that value first though to get a proper URL string.


#6

I have few links with the "pattern" http://site1.com/random-text...

Parent URL = http://site1.com/?3Tb81tLFetv(random text)URL-I-need

Onclick on a link/"Parent URL" > it opens a page I don't want it...
The page that needs to open (onclick on a link/"Parent URL") is the page with the URL-I-need !


#7

how do you define the boundary between random text and the URL you need?

IE: site1.com/?fiewj3weopriwe9pouterspace.com

what URL do i want? space.com? outerspace.com? pouterspace.com? If I cant define a boundary, you dont know.


#8

A completely generic solution is not going work for you.

Can you please supply a couple of actual URL's so that we can put together a solution that properly works for you.


#9
  1. Parent URL1 = http://site1.com/random-text1/ URL-I-need1

  2. Parent URL2 = http://site1.com/random-text2/ URL-I-need2
    ...........................
    and so on...

So, I want to open (onclick...) ONLY URL-I-need1, URL-I-need2, URL-I-need3, ....


#10

then get everything after /_, hoping that this character combination doesn't appear elsewhere in the text.


#11

...you're right ! :wink:..but HOW ? A JavaScript function to "cover" all URL-I-need...?!?


#12

the most simple solution were to put the URL into a query parameter.


#13

Ok...but how ? I do not know so much JavaScript to "compose" a function like that is needed here ...:slight_smile:


#14

@m3g4p0p posted such a function in post #5


#15

Except the URL format he's provided is not actually a query.

url.split("/").pop();


#16

Let's write this up as an example.

const url = [
  "http://site1.com/random-text1/ URL-I-need1",
  "http://site1.com/random-text2/ URL-I-need2"
];
const getURL = (str) => /[^\/]+$/.exec(str);
const toScreen = (str) => document.body.innerHTML += str + "<br>";

url.map(getURL).map(toScreen);

Which gives us:

URL-I-need1
URL-I-need2

This sample code can be explored at https://jsfiddle.net/j3ey1v2s/8/

Add more items to the array to test different other types of URLs.


#17

That's why previously I said to use an URL query parameter for that...


#18

Thank you.

I tried it but...it returns...just a part of "URL-I-need" (without http://) !?!

I think I will need something like...onclick=window.open(...) ?!?

The "pattern" of "Parent URL" looks like (for example) http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNE-sNCSN6A5MI5jRK3nKZv01EF_9Q&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=b-gxW-mVJcP9zAa9gZngBA&url=https://www.cambridgenetwork.co.uk/news/tame-your-computer-find-a-formula-260618/

The URL-I-need (one of them...) is https://www.cambridgenetwork.co.uk/news/tame-your-computer-find-a-formula-260618/, of course :wink: (so, I would like to 'open' ONLY...any URL after "...&url=...") .


#19

Well in that case, you can just get the url parameter. It couldn't be simpler - you should've asked for this in the first place.

const url = [
  "http://example.com/page.html?url=http://site1.com/random-text1/ URL-I-need1",
  "http://example.com/?url=http://site1.com/random-text2/ URL-I-need2",
  "http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNE-sNCSN6A5MI5jRK3nKZv01EF_9Q&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=b-gxW-mVJcP9zAa9gZngBA&url=https://www.cambridgenetwork.co.uk/news/tame-your-computer-find-a-formula-260618/"
];
function queryKey(url, key) {
	const match = /\?(.*)/.exec(url);
  if (!match) {
  	return;
  }
  const query = match[1];
  const parts = query.split("&");
  return parts
    .map((part) => part.split("="))
    .filter((split) => split[0] === key)
    .map((split) => split[1]);
}
const getURL = (str) => queryKey(str, "url");
const toScreen = (str) => document.body.innerHTML += str + "<br>";

url.map(getURL).map(toScreen);
// http://site1.com/random-text1/ URL-I-need1
// http://site1.com/random-text2/ URL-I-need2
// https://www.cambridgenetwork.co.uk/news/tame-your-computer-find-a-formula-260618/

https://jsfiddle.net/j3ey1v2s/29/


#20

There are also libraries that dramatically simplify this for you. For example, there's a nice getUrlParameter() function from a Get Query String Parameters with JavaScript blogpost, that can be slightly modified so that it works with any url.

function getUrlParameter(url, name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(url);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

which can be seen in action with your intended usage at https://jsfiddle.net/j3ey1v2s/30/