How can I extract a particular link from a string of HTML in JavaScript?

Luke Wheeler

I'm using the Flickr public API to build a small Express and React app. It returns a 'description' which is a string of HTML:

<p>
    <a href="URL">martin_king.photo</a> posted a photo:
</p> 
<p>
    <a href="URL_IMAGE" title="Potato Planting 2018 | FENDT // REEKIE">
        <img src="URL_IMAGE" width="240" height="160" alt="DESC_PHOTO" />
    </a>
</p>
<p> 
    FENDT 412 Vario TMS with the REEKIE ScanStone Separator <br/><br/> Follow Us: <br/> • 
    <a href="URL" rel="nofollow">Facebook - DYNASTYphotography</a> <br/> • 
    <a href="URL" rel="nofollow">Lukaskralphoto Instagram</a><br/> • 
    <a href="URL" rel="nofollow">my personal Instagram</a><br/> • 
    <a href="URL" rel="nofollow">YouTube Channel</a>
</p>

The first a tag there contains the link I need, I just need some help writing a function/RegExp that can help me extract it. This is my intended result:

getFirstLinkFromDescription = string => ... // 1st 'URL'

Thanks for any help!

Titus

When it comes to parsing HTML, regex is not that precise. What you could do is to create Nodes from that HTML which will make it easier to access the different attributes of those elements, something like:

var html = '<p><a href="https://www.flickr.com/people/129661619@N08/">martin_king.photo</a> posted a photo:</p> <p><a href="https://www.flickr.com/photos/129661619@N08/41552236041/" title="Potato Planting 2018 | FENDT // REEKIE"><img src="https://farm1.staticflickr.com/899/41552236041_7183e7a533_m.jpg" width="240" height="160" alt="Potato Planting 2018 | FENDT // REEKIE" /></a></p> <p>FENDT 412 Vario TMS with the REEKIE ScanStone Separator<br /> <br /> You can follow us: <br /> • <a href="https://www.facebook.com/DYNASTYphotography-204551272942391/timeline/" rel="nofollow">Facebook - DYNASTYphotography</a> <br /> • <a href="https://www.instagram.com/lukaskralphoto/" rel="nofollow">Lukaskralphoto Instagram</a><br /> • <a href="https://www.instagram.com/martin939king/" rel="nofollow">my personal Instagram</a><br /> • <a href="https://www.youtube.com/user/HighlandBunnyLuv" rel="nofollow">YouTube Channel</a></p>';
var div = document.createElement("div");
div.innerHTML = html;
var anchor = div.querySelector("a");
console.log(anchor.href);

Collected from the Internet

Please contact [email protected] to delete if infringement.