How to translate from jquery to pure javascript this finsweet hack #4 made for webflow-CodePudding

This code is from finsweet (named hack #4) made to dynamically Create CMS generated anchor links on Webflow. I have no more character room to put it in "before body" (webflow limit the numbers of character there). I need to put this code in Embed code. Embed code in webflow doesn't accept Jquery.

Could you help me to translate this same code in pure javascript ? I've let the comments to make it easier.

   $(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) );
   });

CodePudding user response：

I tried converting the code to vanilla javascript, let me know if it's not working.

document.ready(function() {
    const linkTextArr = [];

    document.querySelectorAll(".navlink_button").forEach((link, index) => {

        let linkText = link.innerText.replace(/\W/g, '_').toLowerCase();

        link.setAttribute('href', '#'   linkText);

        linkTextArr.push(linkText);
    });

    document.querySelectorAll(".hack4-cms-anchor-section").forEach((section, index) => {
        section.setAttribute('id', linkTextArr[index]);
    });

    let observer = new IntersectionObserver((entries, observer) => {

        entries.forEach(entry => {

            if (entry.isIntersecting) {
                document.querySelector('.navlink_button.hack4-active').classList.remove("hack4-active");
                document.querySelector(`.navlink_button[href='#${entry.target.id}']`).classList.add("hack4-active");
            }
        });


    }, {
        threshold: 0
    });

    document.querySelectorAll(".hack4-cms-anchor-section").forEach((sec, i) => observer.observe(sec));
});

CodePudding user response：

Probably, this might help you but you have to unit test your code because you can't entirely depend on some online tool in case of conversion logics.

Convert Jquery code to vanila Javascript

Here, I have done activity for you. Please test it and replace the selectors if you find some error or glitch in it.

 document.querySelector(document).ready(function() {
   const linkTextArr = []; 
// for each filter button
   document.querySelector('.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);
   });
// for each section
   document.querySelector('.hack4-cms-anchor-section').each((index, section) => {     

   document.querySelector(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){
   document.querySelector('.navlink_button.hack4-active').removeClass('hack4-active');
   document.querySelector(`.navlink_button[href='#${entry.target.id}']`).classList.add('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
   document.querySelector('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
   });