A question about the last challenge in regular expression

[zak]

so this exercise is about removing white space at the beginning and at the end of a string, so basically, I needed to use the white space shorthand and the pattern matchers caret ^ and dollar sign $, so my solution was this /^\s+|\s+$/ but it was not enough until I checked for hints and found the solution like down below:

let hello = "   Hello, World!  ";
let wsRegex = /^\s+|\s+$/g;;
let result = hello.replace(wsRegex,'');
console.log(result);

my question is why they had to use the global flag to get it done?
I think there is only one pattern to match at the beginning ‘we use the caret for that’ and one pattern to match at the end of the string ‘we use the dollar sign for that’, why the g flag in this case?
the challenge
thank you.

[snowmonkey]

You need to use the global flag as you want to find more than one of them. Without the g, it is stopping at the first match. With the g, it is matching all beginning- or ending-spaces.

[zak]

Sorry, Because in one string there is only one beginning and one end. I’m little confused.
I can look at the string and i see 2 or 3 spaces at the begining and they are all matched with a caret and a gready match which is the short hand for white space followed by a + to matched longest consecutive single white spaces. Do you mean the regex matches only one white space the size of one character and the g flag is to match all the spaces at the begining? Either that or all the spaces at the begining are matched at once with gready match and therefore there is only one match with a caret to get at the begining. Where are all the other matches at the begining to be taken by the g flag?
Thanx

[snowmonkey]

In some strings there is a space at the beginning. In some there is a space or three at the end. In some there are both, and in some neither.

Your regex should account for any of those options. by saying “globally find all spaces at the beginning or end of each string”, we cover every case:

• Beginning of a string but not the end (^\s+),
• End of a string but not the beginning(\s+$),
• Both beginning and and (/ /g).

[zak]

It’s like the g flag is used because there is an or operator used in the regex, no ?
I thought i should throw this thought to make sure.
Overall i get it.

[snowmonkey]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global The MDN does a great job of explaining a lot of things, including the global flag (/g).

The or flag simply says “find an occurrence in the string of either this substring or that one”. The g says “find all occurrences of all matches.” So even this:

const oneRegex = /[a-z]an/;
const allRegex = /[a-z]an/g;
const str = 'A man with a banana and a plan can handle anything';

console.log(str.match(oneRegex));
// Array ['man']

console.log(str.match(allRegex));
// Array ["man", "ban", "lan", "can", "han"]

So without the g flag, the str.match() returns the first occurrence of the regex: 'man'. With the g, we get all matches.

[zak]

Here is a question that will definitely answer my mind, so back to our first example with whitespace at begining and end of string, if i say i want to match only white space at the begining of the any string and then replace it … Should i use the g flag with my regex : /^\s+/g ? Or just just the regex /^\s+/ ?
This will really make things intuitive to me.
Thank you.

[snowmonkey]

As that will match only the white space of a string, the global flag doesn’t mean much here. If we had this:

const myRegex = /^\s+/g;

that says “match any occurrence of spaces at the beginning of the string.” So where else in the string might you find “spaces at the beginning of the string?” In this case, the g flag doesn’t actually do a whole lot.

If you want to match all spaces, your regex would be this:

const myRegex = /\s+/g;

console.log(' The  quick   brown    fox     jumps      over       the 
       lazy         dog          '.match(myRegex) );

That last returns all ten whitespace groups. The first is a single space, the next two, then three… but the regex, because it’s g, finds all of them.

If we don’t want to find all the ones in the middle of the string, but just the ones at the ends, we can do that as you’ve seen:

const myRegex = /^\s+|\s+$/g;

that one says “find any whitespace characters not between words, but at the ends of the given string.”

[zak]

Which come to my first understanding of it, the g flag is there in case we have whitespace in begining and whitespace at the end both accurring at same time, since the or operator is giving you one match either you will find it at the begining and at the end, so the g flag is here to get both matchs hence all match ( the definition of a g flag).
I feel what i said is wrong but i also feel i’m right.

[snowmonkey]

I think you’re right, just not necessarily complete. Without the g flag, it stops at the first match. So saying “this or that” will stop at either this… or that.

Adding the g flag says “don’t stop until you’ve found every this, and also every that”.