Javascript extract anchor tag from a string and create new React component from it

I am using React and Javascript and have a requirement where I need to extract certain anchor tags, take their attributes like id, href and create a custom React link component out of it.
My string looks like this
"<p>Bla bla bla bla.</p>\n<ul>\n<li><strong>Bla bla</strong>. Bla bla bla.</li>\n<li><strong>Bla bla bla</strong>.<a href='#footnote1' id='sup1'><sup>1</sup></a> Bla bla bla.</li>\n<li><strong>Bla bla bla.<a href='#footnote2' id='sup2'><sup>2</sup></a>\r\n</strong>&#160; Bla bla bla.</li>\n<li><strong>Bla bla:</strong>Bla bla <a href=\"https://google.com\" target=\"no\">Google</a> * bla bla bla.<a href='#footnote1' id='sup3'><sup>1</sup></a></li>\n</ul>\n<p>&#160;</p>"

I want to only extract all those <a> that have <sup> inside them. I want to then take the attributes of such <a> and create a custom React link component like

<MyLink
      id={id of the anchor tag}
      addClasses={"footnote-link"}
      href={href of anchor tag}
      handleClick={myClickHandler}
      ariaProps={{
        label: {text inside the sup tag}
      }}
    >
      <sup className={href of anchor tag !== null ? "custom-class" : ""}>{text inside the sup tag}</sup>
    </MyLink>

I then want to replace those <a> with my custom component in the string. Reason I am trying to convert <a> to custom component is that I want the new anchor tag to be A11Y compliant and anchor tags and the source string are not in my control.

I tried the combination of How to get the href value of an anchor tag with javascript from a string and javascript regex to extract anchor text and URL from anchor tags, but couldn’t make much progress.
I also tried react-string-replace, but that didn’t help much either.

I also have an option of getting <a href='#footnote1' id='sup1'><sup>1</sup></a> replaced with something like #FootNote({id:\"sup1-CB\", goto:\"sup1\", data:\"1\"})#FootNote and then use "id", "goto" and "data" to create the custom link.

Can anyone provide some guidance on how to achieve this?
I apologize for the long question.

48 thoughts on “Javascript extract anchor tag from a string and create new React component from it”

  1. 410877 955561Maintain in touch whilst functioning from your personal home workplace with out all with the hassle of purchasing or procurment costly workplace equipment. Debtors are allowed to apply with their a bad credit score background whenever. 740268

    Reply

Leave a Comment