JSFiddle - React, Tailwind, and code Playground

by Fagner Brack

HTML

<div id="container">
  <h1>
    Open Source?
  </h1>
  <section>
    <p>
      If you go to <a href="http://github.com">Github</a>, you can find a lot of Open Source.
    </p>
    <p>
    You can also look at the <a href="https://opensource.org/">Open Source Initiative</a> and the <a href="https://www.linuxfoundation.org/">Linux Foundation</a> for additional information. <br>
    The <a href="https://opensource.org/">Open Source Initiative</a> has coined the term "Open Source".
    </p>
  </section>
  <h2>
    Give us feedback on this website!
  </h2>
  <form>
    <input type="text">
    <button type="submit">Send</button>
  </form>
</div>

JavaScript

function indexForLinks(html) {
	const document = new DOMParser().parseFromString(html, 'text/html');
  return [...document.querySelectorAll('a')]
    .map((link) => {
       return link.href;
    })
    .reduce((linksOccurrences, currentUrl) => {
    	if (!linksOccurrences[currentUrl]) { linksOccurrences[currentUrl] = 0; }
      linksOccurrences[currentUrl] += 1;
    	return linksOccurrences;
    }, {});
};

const htmlMessage = document.getElementById('container').innerHTML;
const alertMessage = JSON.stringify(indexForLinks(htmlMessage), null, 4);
alert(alertMessage);