0

I'm new to react. I am having problem with handling the <a> tag that comes from the backend or database as data. Is there a way to convert them to <Link> ? Or is there any other way to route them

isherwood
  • 58,414
  • 16
  • 114
  • 157
Pragun Bajracharya
  • 28
  • 3
  • 2
    Welcome to Stack Overflow. Please take a minute to read [ask] and [mcve] for some tips on how to write your question so that we can provide the answer that helps. – Code-Apprentice Nov 07 '19 at 17:01
  • 1
    Sorry, it's a bit difficult to understand your question. How does your data look when you receive them? Do you receive a string like `"example"` and insert it into your jsx in render? (like in curly brackets (`{ data.aTag }`)? Please provide some relevant code snippets ("I receive data in this form and I render it in this form") so that we can understand better what you are trying to achieve. – selmanbey Nov 07 '19 at 17:11
  • yes I recieve data in `example` form as a string which I use `dangerouslySetInnerHTML` to display it. – Pragun Bajracharya Nov 07 '19 at 17:37

1 Answers1

0

I am still not sure if I understand what you mean exactly, but this might probably be what you are looking for. Let's say you received your data and it looks like this:

let aTag = '<a href="exampleLink">exampleText</a>'

To construct your <Link>, all you need is the value for 'href' attribute and the innerText. You can get them with regex:

let href = aTag.match(/(?<=href=").+(?=")/g)  // returns "exampleLink"
let inText = aTag.match(/(?<=>).+(?=<)/g)  // returns "exampleText"

Then you can construct your <Link>s accordingly and do whatever you want to do with them.

<Link to={ href }>{ inText }</Link>

P.S. The funky looking things in the regex is called 'lookahead' and 'lookbehind':

P.S.2. This is not optimal / wouldn't scale well because * the regex for inText won't work as intended if your a tag has some more children tags in it; * the regex for href may also need some adjusting if your data escapes quotation marks around the href value (i.e., for href=\"exampleText\" you'd need /(?<=href=\").+(?=\")/g); * you may receive a tags with more attributes (target, rel etc). But if there is a pattern to your data and you know that you will always receive the same pattern, then this might work just fine.

UPDATE:

Your further question made me think of a better, much simpler (and also safer) way of doing this. You can basically parse your html string to a dummy html element and then query it later (exactly like explained in this answer: https://stackoverflow.com/a/10585079/7228779)

So you have your data:

let data = '<div>Lorem Ipsum is simply <a href="/test">dummy text</a> of the printing and typesetting industry.<div>'

You create a dummy element and append your data to it:

let dummyEl = document.createElement("div");
dummyEl.innerHTML = data;

And then get your a tag (or tags) with querySelector:

dummyEl.querySelector("a")  // returns the element: <a href="/test">dummy text</a>
selmanbey
  • 318
  • 1
  • 8