Remove Whitespace from Start and End- Why this didn't work?

JavaScript
1

Tell us what’s happening:

Your code so far


let hello = "   Hello, World!  ";
let wsRegex = /^(\s+)|\1$/g; // Change this line
let result = hello.replace(wsRegex,"" ); // Change this line

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end

Why can’t I use group?

1 Like
2

The ^ at the beginning of your regex is specifically starting the search at the beginning of the string. In other words, your expression is looking for multiple matches, but only where each match starts at index 0. Of course, the ending spaces that you’re also trying to capture start at index 16, not at index 0.

You might find this explanation a bit easier to understand the “beginning” distinction - https://regexone.com/lesson/line_beginning_end

1 Like
3

The regex /^(\s+)|\1$/g has potentially another problem, and that’s the use of the \1 backref. What this says is match any amount of regex at the beginning of the string, or the same amount of whitespace at the end. Since the only way the second alternation is going to fire is if the first one doesn’t match, the group is never defined, so it would match on zero whitespace, i.e. anything.

The short of it is, having a backref go across alternations doesn’t usually make a lot of sense, since it’s referencing a group that may not have matched anything. In fact, testing it in node, I couldn’t even make it match consistently on the same string.

2 Likes
4

Thank you metasean.

I am not sure if there is any concept I misunderstand.

Would you please explain why this /^\s+|\s+$/g can pass the task then??

5

Thank you chuckadams

I don’t fully understand it yet. Maybe I misunderstand some concept.
I am still wondering why /^\s+|\s+$/g can pass the task.
Aren’t they the same as /^(\s+)|\1$/g?

1 Like
6

You may think so, but the \1 match exactly what was matched by the thing in round parenthesis, if there are different number of spaces it doesn’t work. Plus you use an OR, so the second part of the regex is checked only if the first part matches nothing, so, the \1 will match zero spaces because it match exactly what was in the round parenthesis…

Try with a website like this to experiment with the regex: https://regex101.com/

3 Likes
7

/^(\s+)|\1$/g - is globally looking for anything that matches either of two conditions (example) - where the two conditions are singly:

/^\s+|\s+$/g - is also globally looking for anything that matches either of two conditions (example) - where the two conditions are singly:

Here’s a rough javascript analogy:

let startStringMatch = false
let endStringMatch = true

// /^(\s+)|\1$/g is like this:
let either = startStringMatch || endStringMatch
console.log('either:', either)

// /^\s+|\s+$/g is like this:
let backmatch = startStringMatch || endStringMatch === startStringMatch
console.log('backmatch', backmatch)
2 Likes
8

Thanks a lot!! I totally understand it know!

1 Like
9

And on that note…

use .trim() in future… (when you’re not required to use regex that is)

1 Like
10

Right!! This is the best solution.
Thanks for the reminder.

1 Like