Translate Finsweet hack#4 jquery in pure javascript

I got a code in Jquery from finsweet hack#4 and need it in pure javascript, because no more room in before body because of character limits… (I need to put it in Embed code that accept only pure javascript.) Could you help me to translate this finsweet code in pure javascript ?
I’ve let the comments to make it easier.

ORIGINAL JQUERY CODE:

     // when DOM's ready
$(document).ready(function() {
       const linkTextArr = []; 
    // for each filter button
       $('.navlink_button').each((index, link) => {
    // get its text content and reformat to a valid ID
       let linkText = $(link).text().replace(/\W/g,'_').toLowerCase(); 
    // set the reformatted linkText as the link href attribute
       $(link).attr('href', '#'+linkText);
    // push reformatted linkText to array 
       linkTextArr.push(linkText);
       });
    // for each section
       $('.hack4-cms-anchor-section').each((index, section) => {     

       $(section).attr('id', linkTextArr[index]);
       });
    // set up intrsection observer 
       let observer = new IntersectionObserver((entries, observer) => { 
    // for each anchor section
       entries.forEach(entry => {
    // if it's in the viewport
       if(entry.isIntersecting){
       $('.navlink_button.hack4-active').removeClass('hack4-active');
       $(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
       }
       });
    // set thrshld to 1 ensures the whole anchor section
    // is in viewport before adding active class to active link
       }, {threshold: 0});
    // start intersection observer for each anchor section
       $('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
       });

I tried to translate it like this, by replacing all the selectors:

// when DOM's ready
document.addEventListener('DOMContentLoaded', () => {
// create empty array that will store link text strings 
   const linkTextArr = []; 
// for each filter button
   document.querySelectorAll('.navlink_button').each((index, link) => {
// get its text content and reformat to a valid ID
   let linkText = document.querySelector(link).text().replace(/\W/g,'_').toLowerCase(); 
    // set the reformatted linkText as the link href attribute
  document.querySelector(link).attr('href', '#'+linkText);
// push reformatted linkText to array 
   linkTextArr.push(linkText);
// console.log(linkText);
   });

// for each section
// ex: hellosign > hellosign 
document.querySelectorAll('.hack4-cms-anchor-section').each((index, section) => {     
// set id attribute to linkTextArray value sequentially
// 1st section gets id: linkTextArr[0]
// 2nd section gets id: linkTextArr[1] and so on
   document.querySelectorAll(section).attr('id', linkTextArr[index]);
   });
// set up intrsctn obsrvr 
// (navlnk btn highlight when on sectn)
// 2 observ whn th anchor sectns ar in viewport
   let observer = new IntersectionObserver((entries, observer) => { 
// for each anchor section
   entries.forEach(entry => {
// if it's in the viewport
   if(entry.isIntersecting){
// remov l'active class from current active link
document.querySelector('.navlink_button.hack4-active').removeClass('hack4-active');
// add the active class to the current active link
document.querySelector(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
       }
       });
    // set thrshld to 1 ensures the whole anchor section
    // is in viewport before adding active class to active link
    // this part ', {threshold: 1}' is optional
       }, {threshold: 0});
    // start intersection observer for each anchor section
    document.querySelectorAll('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
       });

But I don’t know how to translate this line with this #${ :

$(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');

after that can you tell me if there something else that is still jQuery on my translation attempt ?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)