JSFiddle - React, Tailwind, and code Playground

by cmruser

JavaScript

const parser = new DOMParser();
let mainInternal = `
<div class="internal">
  <header class="internal-header">
    <nav class="navbar">
      <div class="navlogo"><a href="/">Internal App</a></div>
      <ul class="navlink"><NavMain url={url} /></ul>
      <ul class="navlink"><NavProfile url={url} /></ul>
    </nav>
  </header>
  <aside class="internal-aside">
    <NavSub url={url} />
  </aside>
  <main class="internal-main">
    <Content {...props} />
  </main>
  <footer class="internal-footer"></footer>
</div>
`;

 const strHtml = parser.parseFromString(mainInternal, 'text/html');
 
 strHtml.querySelectorAll('a').forEach(a => {
 const s = a.outerHTML;
 const href = a.getAttribute('href');
 const text = a.innerText;
 const link = `<Link to="${href}">${text}</Link>`;
 
  mainInternal = mainInternal.replace(s, link);
  
  console.log(mainInternal);
});