Problem encountered when using multiple tags for the table of contents

Question

Problem encountered when using multiple tags for the table of contents

My script generates a table of contents based on the headings h2 and h3. The issue arises when there is a span tag within an h2, causing the script to skip that heading and not create a link for it. I suspect the problem lies in the regular expression

/<h([\d]).*>\s*[\d]*\s?[.]?\s?([^<]+)<\/h([\d])>/gi

but I'm not proficient in regex to fix it.

$(document).ready(function() {
  var toc = "";
  var level = 0;
  var maxLevel = 3;

  if (document.getElementById("contents") != null) {

    document.getElementById("contents").innerHTML =
      document.getElementById("contents").innerHTML.replace(
        /<h([\d]).*>\s*[\d]*\s?[.]?\s?([^<]+)<\/h([\d])>/gi,
        function(str, openLevel, titleText, closeLevel) {

          if (openLevel > maxLevel) {
            return str;
          }

          if (openLevel > level) {
            toc += (new Array(2)).join("<ol>");
          } else if (openLevel < level) {
            toc += (new Array(level - openLevel + 1)).join("</ol>");
          }

          level = parseInt(openLevel);

          var anchor = titleText.replace(/[^a-zA-Z]+/g, "-");

          toc += "<li><a href=\"#" + anchor + "\">" + titleText +
            "</a></li>";

          return "<a name=\"" + anchor + "\">" +
            "<h" + openLevel + "\">" + str + "</h" + closeLevel + ">" + "</a>";
        }
      );

    if (level) {
      toc += (new Array(level + 1)).join("</ol>");
    }

    document.getElementById("toc").innerHTML += toc;
  }

});

.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 0.85em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<head>
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</head>

<body>
  <div id="toc">
    <div id="contents">
      <h2>What is JS?</h2>
      <h2 style="margin-top:1em;">Python Jobs - <span class="blink">New!</span></h2>
      <h2 style="margin-top:1em;">
        What is Python?
      </h2><h3>Introduction</h3>
    </div>
  </div>
</body>

javascript

Answer 1

Answer №1

You have the ability to achieve this without using regular expressions

$(document).ready(function() {
  const toc = document.createElement('ol');

  if (document.getElementById("contents") != null) {
    document.getElementById("contents").append(toc);
    document.querySelectorAll("#contents h2").forEach((title) => {
      const item = document.createElement('li');
      const link = document.createElement('a');

      if (title.getAttribute('id') === null) {
        title.setAttribute('id', 'id-' + Math.random().toString(16).substr(2, 6));
      }

      link.innerText = title.innerText;
      link.setAttribute('href', '#' + title.getAttribute('id'));

      item.append(link);
      toc.append(item);
    });
  }
});

.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 0.85em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<head>
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</head>

<body>
  <div id="toc">
    <div id="contents">
      <h2>What is JS?</h2>
      <h2 style="margin-top:1em;">Python Jobs - <span class="blink">New!</span></h2>
      <h2 style="margin-top:1em;">
        What is Python?
      </h2>
    </div>
  </div>
</body>

Edit

You still have the option to maintain the structure as before

$(document).ready(function() {
  const toc = document.createElement('ol');
  let last = toc;

  if (document.getElementById("contents") != null) {
    document.getElementById("contents").append(toc);
    document.querySelectorAll("#contents h2, #contents h3").forEach((title) => {
      const item = document.createElement('li');
      const link = document.createElement('a');

      if (title.getAttribute('id') === null) {
        title.setAttribute('id', 'id-' + Math.random().toString(16).substr(2, 6));
      }

      link.innerText = title.innerText;
      link.setAttribute('href', '#' + title.getAttribute('id'));

      item.append(link);

      if (title.tagName === 'H2') {
        toc.append(item);
        last = item;
      } else {
        let ol = last.querySelector('ol');
        
        if (!ol) {
          ol = document.createElement('ol');
          last.append(ol);
        }

        ol.append(item);
      }
    });
  }
});

.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 0.85em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<head>
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</head>

<body>
  <div id="toc">
    <div id="contents">
      <h2>What is JS?</h2>
      <h3>A programing language</h3>
      <h2 style="margin-top:1em;">Python Jobs - <span class="blink">New!</span></h2>
      <h2 style="margin-top:1em;">
        What is Python?
      </h2>
      <h3>A cool programing language</h3>
    </div>
  </div>
</body>

Answer 2

You have the ability to achieve this without using regular expressions

$(document).ready(function() {
  const toc = document.createElement('ol');

  if (document.getElementById("contents") != null) {
    document.getElementById("contents").append(toc);
    document.querySelectorAll("#contents h2").forEach((title) => {
      const item = document.createElement('li');
      const link = document.createElement('a');

      if (title.getAttribute('id') === null) {
        title.setAttribute('id', 'id-' + Math.random().toString(16).substr(2, 6));
      }

      link.innerText = title.innerText;
      link.setAttribute('href', '#' + title.getAttribute('id'));

      item.append(link);
      toc.append(item);
    });
  }
});

.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 0.85em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<head>
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</head>

<body>
  <div id="toc">
    <div id="contents">
      <h2>What is JS?</h2>
      <h2 style="margin-top:1em;">Python Jobs - <span class="blink">New!</span></h2>
      <h2 style="margin-top:1em;">
        What is Python?
      </h2>
    </div>
  </div>
</body>

Edit

You still have the option to maintain the structure as before

$(document).ready(function() {
  const toc = document.createElement('ol');
  let last = toc;

  if (document.getElementById("contents") != null) {
    document.getElementById("contents").append(toc);
    document.querySelectorAll("#contents h2, #contents h3").forEach((title) => {
      const item = document.createElement('li');
      const link = document.createElement('a');

      if (title.getAttribute('id') === null) {
        title.setAttribute('id', 'id-' + Math.random().toString(16).substr(2, 6));
      }

      link.innerText = title.innerText;
      link.setAttribute('href', '#' + title.getAttribute('id'));

      item.append(link);

      if (title.tagName === 'H2') {
        toc.append(item);
        last = item;
      } else {
        let ol = last.querySelector('ol');
        
        if (!ol) {
          ol = document.createElement('ol');
          last.append(ol);
        }

        ol.append(item);
      }
    });
  }
});

.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 0.85em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<head>
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</head>

<body>
  <div id="toc">
    <div id="contents">
      <h2>What is JS?</h2>
      <h3>A programing language</h3>
      <h2 style="margin-top:1em;">Python Jobs - <span class="blink">New!</span></h2>
      <h2 style="margin-top:1em;">
        What is Python?
      </h2>
      <h3>A cool programing language</h3>
    </div>
  </div>
</body>

Answer 3

Answer №2

This code snippet is used to create an HTML collection of all the h2 tags within the .contents div.

It then goes through each item in the collection, extracting the .innerText (ignoring any other tags) and creating a link from the text with non-alphabet characters replaced by dashes.

If you hover over the generated links and check the status bar, you will see that they are valid links. You might need to adjust the .replace method to meet specific formatting requirements, but this code provides a good starting point.

let h2Collection = document.getElementById('contents').getElementsByTagName('h2');
// h2Collection represents an array-like collection of h1 elements found in the #contents div;
 
let links = [];

for (let i=0; i<h2Collection.length; i++) {

  links.push(`<a href="http://www.whateversite.com/${h2Collection[i].innerText.replace(/[^a-zA-Z]+/g, "-")}.html">${h2Collection[i].innerText}</a>`)

} // Next i: h2 element;

document.getElementById('output').innerHTML = links.join('<p>');

.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 0.85em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div id="toc">
    <div id="contents">
      <h2>What is <span style="color:red">JS?</span></h2>
      <h2 style="margin-top:1em;">Python Jobs - <span class="blink">New!</span></h2>
      <h2 style="margin-top:1em;">
        What is Python?
      </h2>
    </div>

    <div id=output></div>
  </div>

Answer 4

This code snippet is used to create an HTML collection of all the h2 tags within the .contents div.

It then goes through each item in the collection, extracting the .innerText (ignoring any other tags) and creating a link from the text with non-alphabet characters replaced by dashes.

If you hover over the generated links and check the status bar, you will see that they are valid links. You might need to adjust the .replace method to meet specific formatting requirements, but this code provides a good starting point.

let h2Collection = document.getElementById('contents').getElementsByTagName('h2');
// h2Collection represents an array-like collection of h1 elements found in the #contents div;
 
let links = [];

for (let i=0; i<h2Collection.length; i++) {

  links.push(`<a href="http://www.whateversite.com/${h2Collection[i].innerText.replace(/[^a-zA-Z]+/g, "-")}.html">${h2Collection[i].innerText}</a>`)

} // Next i: h2 element;

document.getElementById('output').innerHTML = links.join('<p>');

.blink {
  animation: blinker 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
  font-size: 0.85em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div id="toc">
    <div id="contents">
      <h2>What is <span style="color:red">JS?</span></h2>
      <h2 style="margin-top:1em;">Python Jobs - <span class="blink">New!</span></h2>
      <h2 style="margin-top:1em;">
        What is Python?
      </h2>
    </div>

    <div id=output></div>
  </div>

Problem encountered when using multiple tags for the table of contents

Answer №1

Answer №2

Similar questions

Sending data between controllers in AngularJS

Issues with the structure of React hooks arrays

I am curious about how to implement overflow:hidden along with position:sticky in React.js

Navigating through a JSON file using the map function within a React application

React does not play well with the Sendgrid Node.js library

Using HTML and C# to Deliver Emails

How can I display the value stored in draft.js in a different component using React?

Tips for obtaining and storing multiple inputs within the same readline.question prompt in separate variables

Parallel mapping with simultaneous multiple inserts

Unable to assign an IP address to an Express JS application

AJAX seems to be struggling to recognize JSON data as JSON format

Which directives in AngularJS facilitate one-way binding?

Is there a way to compel @keyframes to continue playing until it reaches its conclusion even after a mouseout event

The error message "ReferenceError: express is not defined" indicates that Node.js is

personalized options for initiating and concluding html audio component

Locating numerous occurrences of a specific string within an array and rearranging them

Is it possible to efficiently transfer a Tensorflow.js Tensor between Node.js processes?

Prevent automatic scrolling by clicking when you reach the bottom

What is the best way to finish up the JavaScript code below?

JavaScript still displaying empty values despite correct syntax being used