sigil88
11/30/2016 - 1:47 PM

automatic heading anchors (e.g. posts on a page) using jquery

automatic heading anchors (e.g. posts on a page) using jquery

(function() {

  function slugify(text) {
    return text.toString().toLowerCase().trim()
      .replace(/\s+/g, '-') // Replace spaces with -
      .replace(/&/g, '-and-') // Replace & with 'and'
      .replace(/[^\w\-]+/g, '') // Remove all non-word chars
      .replace(/\-\-+/g, '-'); // Replace multiple - with single -
  }

  var $headers = $(".post-body :header");

  $headers.each(function(index) {

    var $el = $(this);

    var idToLink = slugify($el.text()) + '-' + index;

    var $headerLink = $("<a />", {
      html: "#",
      class: "article-headline-link",
      href: "#" + idToLink,
      id: idToLink
    });

    $el.prepend($headerLink);

  });

}());