openLevel and closeLevel Means? Wrap inside the function

Question

I've implement this code on our This is an blog post to create a dynamic table of content page. This code are coming stackoverflow.

Mostly, I understand what's the code all about but I'm curious what doesn't tr, openLevel, titleText, closeLevel means that is wrap into function.

function (str, openLevel, titleText, closeLevel) {
if (openLevel != closeLevel) {
c.log(openLevel)
return str + ‘ – ‘ + openLevel;
}

Help! I'm really practicing to understand what I am copy/pasting in the web.

Trigger of the script is the #contents

<div id=”contents”> Blog post here with all the headings</div>

<div id=”console”>&nbsp;</div>
<div id=”toc” class=”toc1″>
<h3>Table Of Contents</h3>
</div>

var c = function() {
return({
log: function(msg) {
consoleDiv = document.getElementById(‘console’);
para = document.createElement(‘p’);
text = document.createTextNode(msg);
para.appendChild(text);
consoleDiv.appendChild(para);
}
});
}();

window.onload = function () {
var toc = “”;
var level = 0;
var maxLevel = 3;

document.getElementById(“contents”).innerHTML =
document.getElementById(“contents”).innerHTML.replace(
/<h([\d])>([^<]+)<\/h([\d])>/gi,
function (str, openLevel, titleText, closeLevel) {
if (openLevel != closeLevel) {
c.log(openLevel)
return str + ‘ – ‘ + openLevel;
}

if (openLevel > level) {
toc += (new Array(openLevel – level + 1)).join(“<ol>”);
} else if (openLevel < level) {
toc += (new Array(level – openLevel + 1)).join(“</ol>”);
}

level = parseInt(openLevel);

var anchor = titleText.replace(/ /g, “_”);
toc += “<li><a href=\”#” + anchor + “\”>” + titleText
+ “</a></li>”;

return “<h” + openLevel + “><a name=\”” + anchor + “\”>”
+ titleText + “</a></h” + closeLevel + “>”;
}
);

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

document.getElementById(“toc”).innerHTML += toc;
};

Answer 1 · 2023-02-08T17:03:12Z

February 8, 2023 5:03pm

Those variables represent the groups that are broken out by the regex expression passed as the first argument to the replace method:

/<h([\d])>([^<]+)<\/h([\d])>/gi
    ^^^^   ^^^^       ^^^^
openLevel  titleText  closeLevel

So if the contents were <h1>sample</h1> then openLevel would be "1", titleText would be "sample", and closeLevel would be "1".

Welcome to the Treehouse Community

Looking to learn something new?

Angelic Sanoy

Angelic Sanoy

openLevel and closeLevel Means? Wrap inside the function

1 Answer

Steven Parker

Steven Parker