Getting the href attribute from html gives unwanted results

Question

I am basically scraping some content off of a website and the HTML looks something like this:

<div>
    <a class="title" href="/recipe/pasta">Pasta Recipe</a>
</div>

Now after scraping this off of the website I use js to get the href attribute like this:

html.getElementsByTagName('a')[0].href

Now the problem is that this returns: file:///A:/recipe/pasta but the result I want is /recipe/pasta . Here's a Stack Snippet example of the same problem - the href results in the domain being prepended, which is undesirable:

 console.log(document.getElementsByTagName('a')[0].href);

 <div> <a class="title" href="/recipe/pasta">Pasta Recipe</a> </div>

I can fix this problem with basic string manipulation but that seems rudimentary.

Also file:///A: is the drive on my computer the A: drive. If I run this on another computer then it will become file:///C: , representing the C: drive.

It might also help to know that I am doing this on an electron app using nodeJS.

Answer 1

Use getAttribute instead, to get just the plain value of the attribute and nothing else:

 const href = document.querySelector('a').getAttribute('href'); console.log(href);

 <div> <a class="title" href="/recipe/pasta">Pasta Recipe</a> </div>