Need help reading regular expression

I copied a script from the web to add highlights to my paragraph elements and the script contained the following regular expression:

var re = new RegExp('(^|\\s)'+cl+'(\\s|$)');

Now I’m reading up on regular expressions to decipher the code but I wanted to accelerate the process by posting to this forum. Can anyone explain what the regular expression finds in the meantime?

See if you can explain what you think the regular expression is doing first, then we can correct any misunderstandings.

The regex matches start of a line ^ or a single space \s, followed by whatever the value of ‘cl’ is, followed by either a single space or end of the line $

Here is the entire function:


removeClass = function(el,cl) {
var re = new RegExp('(^|\\s)'+cl+'(\\s|$)');
if (el.className.match(re))
el.className=el.className.replace(re,' ');
};

cl is a parameter of the removeClass function. I don’t know what cl stands for in the function.

Seems like you understand. I would guess that cl means the class name?

Can someone please help me re-write the function with the newer version of javascript? It can’t be jQuery because it’s for a class assignment. I would prefer for the new function not to have a regular expression.

It’s highlighting a paragraph with the highlight class so it would be something like this:

var x = document.getElementsByTagName("p");
x.classList.remove('highlight');

The code to add the class looks like this:

addClass = function(el,cl) {
var re = new RegExp('(^|\\s)'+cl+'(\\s|$)');
if (!el.className.match(re)) el.className += " "+cl;
};

I think that both of the functions need to be re-written.

Here is the script that was provided at another forum:


const winHeight = window.innerHeight;
const limits = {
  top: winHeight * 20 / 100,
  bottom: bottomLimit = winHeight * 80 / 100
};

function isWithinLimits(el, limits) {
  const viewportOffset = el.offsetTop - window.scrollY;
  return viewportOffset >= limits.top && (viewportOffset + el.clientHeight) <= limits.bottom;
}

function highlightElement(el) {

  if (isWithinLimits(el, limits)) {
    el.classList.add('highlight');
  } else {
    el.classList.remove('highlight');
  }
}
function scrollHighlightHandler() {;
  document.querySelectorAll('.landing__container p').forEach(highlightElement);
}
window.addEventListener('scroll', scrollHighlightHandler);

The next part of my assignment is to highlight the nav bar according to which section I’m in. So if I scroll to section 2, the nav bar TAB 2 will respond. How do I detect which section I’m in? It’s for an assignment so can only use javascript and not jQuery.

The script you posted above gives you a general idea of how to do this. You’ll add a scroll event handler, and in that handler you’ll figure out which section is currently showing and then you can add/remove a “highlight” class to the nav bar items depending on which section is showing. You’ll want to come up with some way to associate each section to its nav bar item so you can do the highlighting.

The hardest part is determining which section is currently showing (that logic is in the isWithinLimits() function). I will warn you that the current logic in there is probably not what you want, so you will need to figure it out on your own. Also, I would not set those consts at the beginning like that because the user can change the height of the browser (in other words, you’ll want to recalculate them each time your logic checks to see which item is in view, or you could listen to the resize event and recalculate every time the height changes).

You can get the current height of the view port, the current position of the scroll bar and the current position of each section using JS. I think that should be all you need to implement the logic.

Thanks for the input, bbsmooth. I was able to solve my assignment with the help of the following script: https://codepen.io/Web_Cifar/pen/LYRBbVE

@makamo66, works well from my end. I tortured my browser by contracting and stretching it to almost unspeakable limits and the highlighting worked properly every time. Great job!

I didn’t write that codepen! I found it by googling.

Ahh, thanks for the clarification, I misread that. Anyhoo, it sounds like you were able to solve things. Congrats.