Search code examples
javascriptreactjshyperlinkanchor

How to open multiple links from a single hyperlink from anchor tag string in React?

I have a string that has multiple anchor tags passed to the frontend in ReactJs. This string is given by the service call.

eg: "<a href=\"https://www.google.com\" target=\"_blank\"> National ID </a><a href=\"https://www.yahoo.com\" target=\"_blank\"> National ID </a>"

I want to display National ID once and open both the links on a blank page. I figured it out that by getting the href links, I can create an onclick function that opens both the links.

I wanted to know, how to extract href from the string. Or is there a better way to solve the issue that I have? Thanks in advance for any suggestions and solutions.

Solution

  • Use regex to parse string and extract links, like this one:

    const input = '<a href="https://www.google.com" target="_blank"> National ID </a><a href="https://www.yahoo.com" target="_blank"> National ID </a>';
const regex = /href="(\S*)"/g;
const links = Array.from(input.matchAll(regex), m => m[1]);