Catching Trailing Spaces – A Superhero’s Story!

A few years ago, I came across a sidekick on the VSCode marketplace that claimed it could help me catch pesky trailing spaces in my code by highlighting them in red, the perfect colour for marking your targets

Initially, I was sceptical but decided to take a chance, and in hindsight, I’m so glad I did.
Ever since, we’ve been a formidable team, never leaving each other’s company, fighting bugs and delivering features 🦸

The VSCode extension I’m talking about is called Trailing Spaces
Here’s a photo of this extension on the VSCode Marketplace :

And here’s how it works in action (notice the red highlights):

In our years as a team, I’ve never once pondered how it achieved its amazing superpowers ️

But should I? 🤔

• Do Superman and Wonder Woman ever ponder how Aquaman manages to communicate with marine life?
• Does Captain America ever consider how Bucky Barnes masters his skills so effortlessly?
• Are there moments when The Flash reflects on how Kid Flash can keep up with his incredible speed? …

Maybe I’m going off-topic, but you get my point.

Ever since the question about the origin of my sidekick’s superpowers came to mind, it has become the only thing I can think about as I go about my day ️ and night fighting bugs and delivering features.

However, I could never find the answer… until now!

The Origins of a Superhero 🦸

Enter Regular Expressions!

Regular Expressions… A force so powerful that many developers who have tried to harness it have failed, leaving only a lucky few to tell their woeful tales

But what is this magic force? What makes it so special?

Let’s jump in

Regular Expressions

Formally, a regular expression is an algebraic notation for characterizing a set of strings.

In non-superhuman speech, regular expressions (a.k.a. regexes) are strings with special powers sprinkled in that allow you to describe how a set of strings look like.
Essentially, regexes allow you to describe a pattern that can potentially match zero or more strings.

Let’s take an example using the below three strings:

• sing
• sang
• sung

Notice a few interesting details about these three strings:

1. Same first letter s
2. Same set of ending letters: n followed by g
3. The second letter of each string is different
   1. In the sing, it is i
   2. In the sang, it is a
   3. In the sung, it is u

Regular expressions allow you to describe these strings as s[iau]ng.

Pro Tip: Please do not read it as sia-ung 🤦

This regex is actually read as follows:

The set of all strings that start with the letter s followed by either the letter i, a, or u and ends with the letters n followed by g.

This pattern is powerful because it allows you to succinctly describe a set of strings without explicitly writing out each one

To understand the benefit, imagine for a second that you have a set of thousand strings. Describing each one would be a nightmare (yes, this also applies to superheroes 🤫). Writing a single regex to describe that set of a thousand strings is much more pleasant

Now, with that super-quick primer on regexes, let’s discuss why they are important in this hero’s story.

Harnessing the Formidable Force

Trailing spaces are technically a set of strings. You could have one or more spaces at the end of every line, and each would be a different string.

Let’s take an example to understand this better.
We’ll take the following Python code to make things easier to visualise.
I’ve represented the space character, i.e., , with the <space> symbol to help make it easier to see.

n = 10<space><space>
for i in range(n):<space><space><space><space>
    print(i)<space><space><space>
n = 10<space><space>
for i in range(n):<space><space><space><space>
    print(i)<space><space><space>
n = 10<space><space>
for i in range(n):<space><space><space><space>
    print(i)<space><space><space>

Enter fullscreen mode Exit fullscreen mode

In this example, each of the strings of trailing spaces, i.e., <space>, <space><space><space><space> and <space><space><space>, share a common pattern:

1. They occur at the end of the line
   1. More accurately, they occur between the last non-space character of the line and the end of the line.
2. They only contain spaces.

So, let’s use regexes to describe them!

However, before I show you the regex, let me tell you about two important regex symbols we’ll use:

• + Symbol
  • Putting aside the complicated definitions, for our use case, the + symbol simply means that the immediate previous character should appear one or more times.
• $ Symbol
  • It represents the end of the line.

Putting it all together, our regex is… 🥁

<spaces>+$
<spaces>+$
<spaces>+$

Enter fullscreen mode Exit fullscreen mode

This regex is read as follows:

The set of all strings at the end of a line that contain one or more spaces.

This is exactly the string pattern we need to detect trailing spaces

We have this force in our grasp!

Let’s try it out!

Trying out our new Superpower ️

To try out our newfound regex, I will use the website called RegEx101. It’s a superhero favourite, so you better bookmark it for later

Steps:

1. Paste in our regex along with the Python code example from earlier onto their website.
2. Replace the <space> symbol with the actual character.

We see that our regex works flawlessly

You can play with this regex on RegEx101 by clicking here.

Beginning of a New Chapter

I can now sleep fight bugs, and deliver features without thinking about the origins of my sidekick’s superpowers.
Overall, I have a newfound appreciation of their superpowers ️

I am more confident that we make a formidable team and we can achieve anything together!

Finally, regexes are a powerful force!
Harness them correctly, and any supervillain 🦹 will run the other way.
Make a mistake, and you stir up a chain of chaos ️

Regular practice is the secret to getting better at anything, and regular expressions are no different.

It may be a formidable force, but you can tame it!

Good luck, and practice well!

原文链接：Catching Trailing Spaces – A Superhero’s Story!