How to find a specific link from an href using JavaScript?

Question

This is my first experience with JS, so please forgive the noob question. I'm trying to make a userscript for a phpBB forum that'll allow me to automatically bookmark every topic I create.

My approach is to add an onclick listener to the submit button. I'll use the code found in another question:

    var submit = document.getElementsByTagName('input')[0];
    submit.onclick = function() {
        ;
    }

Before that though I want to find a link to bookmarking the topic in one of the hrefs on the page and store it as a variable.

I know that it will always take the form of

<a href="./viewtopic.php?f=FORUM_NUMBER&amp;t=TOPIC_NUMBER&amp;bookmark=1&amp;hash=HASH"

The final code should look something like (hopefully it's the correct form)

var link = THE LINK EXTRACTED FROM THE MATCHED HREF
var submit = document.getElementsByTagName('input')[0];
submit.onclick = function() {
    setTimeout(function(){ window.location.href = 'link'; }, 1000);
}

My issue is I don't know how to approach locating the href that I need and getting the link from it. Haven't found any similar questions about this.

Thanks in advance for any help

Answer 1

You can try document.getElementsByTagName("a") ; which returns a collection of all the <a></a> loaded in the dom. Then you can find it in the list and and use.href to get it's href attribute.

Answer 2

Maybe something like this?

var anchors = document.getElementsByTagName('a'); // get all <a> tags
var link = '';
if (anchors) {
  // getAttribute(attributeName) gets the value of attributeName (in your case, the value of 'href' attribute
  // .map(), .find() and .filter() are available methods for arrays in JS
  // .startsWith() is an available method for matching strings in JS.
  // You can even experiment with other regex-based string matching methods like .match()

  // Use one of the following lines, based on what you require:

  // to get the first matching href value
  link = anchors.map(anchor => anchor.getAttribute('href')).find(url => url.startsWith('./viewtopic.php')); // or provide a better regex pattern using .match()

  // to get all matching href values as an array
  link = anchors.map(anchor => anchor.getAttribute('href')).filter(url => url.startsWith('./viewtopic.php')); // or provide a better regex pattern using .match()
}

Since you're not new to coding, check out this documentation if you're new to JS:)

Happy coding!