Apply Anchor Tags to Headers with Ids

apply-anchor-tags-to-headers-with-ids.js

// ==UserScript==
// @name        Apply Anchor Tags to Headers with Ids
// @description Finds all header tags that have ids and puts an anchor inside it
// @match       *://*/*
// @exclude     https://imois.in/games/travle/*
// ==/UserScript==

function applyAnchorTagsToHeadersWithIds() {
  // get all header elements on the page
  const headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6")
  // only work with those that have ids
  const headersWithIds = [...headers].filter( x => x.id )
  const headerChildrenHaveIds = [...headers].filter(x => [...x.children].filter(c => c.id))

  // If there aren't any headers with ids, bye
  if (headersWithIds.length === 0) return

  // loop through each header
  headersWithIds.forEach(applyAnchorIfHeaderHasNoAnchor)
  // loop through header children
  headerChildrenHaveIds.forEach(x => {
    [...x.children].filter(c => c.id).forEach(setInnerHTMLToAnchor)
  })
}

const applyAnchorIfHeaderHasNoAnchor = header => {
  // check if the header already has anchors as children
  const headerHasAnchors = [...header.children].some(x => x.tagName === "A")
  
  if (!headerHasAnchors) {
    setInnerHTMLToAnchor(header)
  }
}

const setInnerHTMLToAnchor = (tag) => {
  // set the tag's innerHTML to an anchor that points to its id and 
  // the textContent of the anchor is the textContent of the tag
  tag.innerHTML = `<a href="#${tag.id}"># ${tag.textContent}</a>`
}

// do the thing
applyAnchorTagsToHeadersWithIds()