Add anchor links to headings

Make every title a clickable anchor.

Ask a question, post a review, or report the script.

Wrap lines

// ==UserScript==
// @name         Add anchor links to headings
// @namespace    http://tampermonkey.net/
// @version      0.9
// @description  Make every title a clickable anchor.
// @author       Beerbeisser
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
  'use strict';
  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  headings.forEach((heading) => {
    if (!heading.querySelector('a[href]') && !heading.closest('a[href]')) {
      const title = heading.textContent.trim().toLowerCase().replace(/\s+/g, '-');
      const anchor = document.createElement('a');
      anchor.href = `#${title}`;
      anchor.id = title;
      anchor.style.color = 'inherit'; // inherit the color of the parent element
      anchor.style.textDecoration = 'none'; // prevent underline
      anchor.textContent = heading.textContent;
      heading.innerHTML = '';
      heading.appendChild(anchor);
    }
  });
})();