collect .href strings from functions in javascript file without executing them

Question

I have a javascript file filled with functions that changes the url of an element when a button is clicked like this:

function ABBA(element){ 
    document.getElementById("link1").href="https://www.youtube-nocookie.com/embed/playlist?list=PLTrnXQx3tvG9dkC_I0h-AzV5Su6YG2k9G";
    document.getElementById("link2").href="https://www.youtube-nocookie.com/embed/playlist?list=OLAK5uy_kFZ1F___4Iw3JsDoNzF4bWWJCJ5EeVZAE";  
    document.getElementById("link3").href="https://www.youtube-nocookie.com/embed/playlist?list=OLAK5uy_kFZ1F___4Iw3JsDoNzF4bWWJCJ5EeVZAE";  
}

function ABC(element){ 
    document.getElementById("link1").href="https://www.youtube-nocookie.com/embed/playlist?list=PLTrnXQx3tvG9dkC_I0h-AzV5Su6YG2k9G";
    document.getElementById("link2").href="https://www.youtube-nocookie.com/embed/playlist?list=OLAK5uy_kFZ1F___4Iw3JsDoNzF4bWWJCJ5EeVZAE";  
    document.getElementById("link3").href="https://www.youtube-nocookie.com/embed/playlist?list=OLAK5uy_kFZ1F___4Iw3JsDoNzF4bWWJCJ5EeVZAE";  
}
// etc etc

My question is, is there a way to collect all those .href strings and save it to a variable, without executing the functions?

What is the end goal here? Keeping the URLs in an array (or an array of objects if you need to map them to element selectors) seems simple enough, or are you loading this JS file from an external source? — DBS, Dec 06 '21 at 11:30
The goal is indeed to keep them in an array. I want to be able to make a shuffle button, that pops one out the array to play the link. My knowledge of javascript is limited though. The file is hosted by myself, it is an external file js though, not embedded in html or anything. — , Dec 06 '21 at 11:32
Could you please bring more details? Why do you even host this file and what for? I think the problem initially lies in the wrong architecture or approach. — mr.boris, Dec 06 '21 at 11:42
If you control the JS and it's static, I don't really understand why you can't just manually create an array containing all the strings you need. — DBS, Dec 06 '21 at 11:56
@DBS You mean by manually inserting each link into an array? That's because i have over 4000 links nested in functions. — , Dec 06 '21 at 11:57

score 0 · Accepted Answer · answered Dec 06 '21 at 12:10

0

You just need: 1) Fetch your file; 2) Write regex for links.

And combine it together:

fetch('./functions.js')
   .then(response => response.text())
   .then((data) => {
      const regexp = /href="(.*?)"/g;
      const array = [...data.matchAll(regexp)];
      console.log(array);
      console.log(array[0][1]);
   });

And result is:

answered Dec 06 '21 at 12:10

mr.boris

3,667
8
37
70

Thanks for helping out, this looks like exactly what i need. But i get "URL scheme "file" is not supported." error, how can i solve this? – Dec 06 '21 at 12:32
1

https://stackoverflow.com/a/50007208/5246900 – mr.boris Dec 06 '21 at 12:35
I have a question, when i test this on the live version on my website, all urls get my website adress attached to them. Why does this happen? – Dec 10 '21 at 16:16
@Richie Why do you think a comment will get you any further than a [question](https://stackoverflow.com/questions/70307794/why-is-my-website-adress-appended-in-front-of-fetched-links)? And why have you deleted that one? Just create an [mcve] as suggested in the comments. – Andreas Dec 10 '21 at 17:07
@Andreas because it'll likely get downvoted anyway and people will nitpick over other stuff or look for the worst in something. I commented here because he's the one who helped me fetching the links in the first place. – Dec 10 '21 at 17:10
@Richie We asked you for an actual [mcve] **in the question itself** (as it is mentioned in [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask)). Without an actual example (= shortest script to reproduce, input, expected and actual output) your question is just too broad/unspecific for an answer. – Andreas Dec 10 '21 at 17:19
@Andreas i understand that, but im not even sure what to post. I just double checked everything with console logs, The fetch does what it needs to do because 2 other elements get info just fine from the same file. The regex does what it needs to do aswell because i just checked with logs. It's just only when it gets loaded into an iframe it suddenly becomes a different link because my website adress is added into it for some reason. So im not even sure anymore what code to post because i get no errors. How do i make a minimal example from that? – Dec 10 '21 at 17:26
@Richie _"...It's just only when it gets loaded into an iframe it suddenly becomes a different link because my website adress is added into it for some reason."_ - Why wasn't that info in your question? How do they end there? That's what is important... – Andreas Dec 10 '21 at 17:31
@Andreas because it's literally `$('#videoplayer').attr('src', prefix);` and i checked with console.log if the `var prefix` is what it's suppose to be, and it is. So no error there... Im not trying to sound like a smart ass i just genuinly don't know what to do with this. – Dec 10 '21 at 17:34
@Richie sorry, could you clarify the problem with urls, please? What is directly related to the task - you should just fetch required file with all of your functions inside and then you should parse it with regexp, that's all you need to do. Do you mean that during the execution `fetch('./functions.js')` attaches the basename of your's website domain like this: `http://www.example.com/assets/functions.js`? If so, you should replace the 'dot' in URL used by fetch method: `fetch('http://example.com/functions.js')`. – mr.boris Dec 11 '21 at 18:36

collect .href strings from functions in javascript file without executing them

1 Answers1