Console.Logging - JavascriptLearner815/custom-programming-language GitHub Wiki

Console.Logging

RegExp

Let's look at the RegExp used in the script.js file:

const consoleRegExp = /(?:^|\s+)console:?\s+\\?"(.+?)\\?";?/gim;

Yay! We're done here, right?

Of course not.

Do you really comprehend this RegExp? Not!

Well, let's jump right in with what RegExr says!

(?:

(?: Non-capturing group. Groups multiple tokens together without creating a capture group.

Well, first, what is a capture group?

$NUM Capture group #NUM. Inserts the results of the specified capture group. For example, $3 would insert the third capture group.

Not very helpful, right? What's a captur-ING group?

() Capturing group #NUM. Groups multiple tokens together and creates a capture group for extracting a substring or using a backreference.

Aha! The substring is an array of the array of what the variable we get from the RegExp (which begins with / and ends with /gim) returns.

^

^ Beginning. Matches the beginning of the string, or the beginning of a line if the multiline flag (m) is enabled. This matches a position, not a character.

Well, the multiline flag (m) is enabled! This means the rest of the RegExp will start immediately when its own line does. For instance, if we were checking for test, this would match:

test

But not:

[SPACE]test

|

| Alternation. Acts like a boolean OR. Matches the expression before or after the |. It can operate within a group, or on a whole expression. The patterns will be tested in order.

When this mentions "boolean OR", it seems to be mentioning independent JavaScript now, so here's an example:

If I were writing an if statement JavaScript statement that ran a console.log if either the variable color === "red" or the variable food === "fries", I'd write it like this:

// var color = ...;
// var food = ...;
if (color === "red" || food === "fries") {
  // console.log(...);
}

The || being used says:

  • Check the first condition (color === "red").
    • If it's false, check the second condition (food === "fries").
      • If it's false, don't run the code inside the block of the if statement.
      • If it's true, run the code inside the block of the if statement.
    • If it's true, run the code inside the block of the if statement.

This is the same with RegExps, except for it's written | and its conditions are of matches.

\s

\s Whitespace. Matches any whitespace character (spaces, tabs, line breaks).

Thanks to the | alternation after ^, if the check is true but with one space on the same line it's typed, the check will still match. This only matches one single space.

+

+ Quantifier. Matches 1 or more of the preceding token.

The aforementioned \s now matches one space or more (e.g. 3 spaces and then the text being checked for).

)

c

c Character. Matches a "c" character (char code 99). Case insensitive.

If the case insensitive flag (i) was not present, this would be case-sensitive.

o

o Character. Matches a "o" character (char code 111). Case insensitive.

If the case insensitive flag (i) was not present, this would be case-sensitive.

n

n Character. Matches a "n" character (char code 110). Case insensitive.

If the case insensitive flag (i) was not present, this would be case-sensitive.

s

s Character. Matches a "s" character (char code 115). Case insensitive.

If the case insensitive flag (i) was not present, this would be case-sensitive.

o

o Character. Matches a "o" character (char code 111). Case insensitive.

If the case insensitive flag (i) was not present, this would be case-sensitive.

l

l Character. Matches a "l" character (char code 108). Case insensitive.

If the case insensitive flag (i) was not present, this would be case-sensitive.

e

e Character. Matches a "e" character (char code 101). Case insensitive.

If the case insensitive flag (i) was not present, this would be case-sensitive.

:

: Character. Matches a "e" character (char code 58).

?

? Quantifier. Match between 0 and 1 of the preceding token.

Also known as "? Optional. The character before is optional."

\s

\s Whitespace. Matches any whitespace character (spaces, tabs, line breaks).

One space must be typed here before the rest of everything. This only allows one single space.

+

+ Quantifier. Matches 1 or more of the preceding token.

The aforementioned \s now matches one space or more (e.g. 3 spaces and then the rest of everything).

\\

\\ Escaped character. Matches a "" character (char code 92).

?

? Quantifier. Match between 0 and 1 of the preceding token.

Also known as "? Optional. The character before is optional."

"

" Character. Matches a """ character (char code 34).

Matches the opening quote.

(

( Capturing group #1. Groups multiple tokens together and creates a capture group for extracting a substring or using a backreference.

The substring is an array of the array of what the variable we get from the RegExp (which begins with / and ends with /gim) returns. This is the first (and only) part of that array.

.

. Dot. Matches any character except line breaks.

The opposite of \s.

+

+ Quantifier. Match 1 or more of the preceding token.

The aforementioned . now matches one space or more (e.g. 3 spaces and then the rest of everything).

?

? Lazy. Makes the preceding quantifier lazy, causing it to match as few characters as possible.

This allows the RegExp to match the first closing quote of what to console.log.

)

\\

\\ Escaped character. Matches a "" character (char code 92).

?

? Quantifier. Match between 0 and 1 of the preceding token.

Also known as "? Optional. The character before is optional."

"

" Character. Matches a """ character (char code 34).

Matches the closing quote.

;

; Character. Matches a ";" character (char code 59).

This is for JavaScript developers familiar with adding semicolons.

?

? Quantifier. Match between 0 and 1 of the preceding token.

Also known as "? Optional. The character before is optional."

Gosh, that was long! Let's review now!

What Does It Match?

Does Match:

Any combination of:

At line start:

  • 0 to infinity spaces or some other text and 1 to infinity spaces, console (case-insensitive), and a space
  • 0 to infinity spaces or some other text and 1 to infinity spaces, console: (case-insensitive), and a space
  • 0 to infinity spaces or some other text and 1 to infinity spaces, console (case-insensitive), and a newline
  • 0 to infinity spaces or some other text and 1 to infinity spaces, console: (case-insensitive), and a newline

At line end:

  • ", desired text to log, and "
  • \", desired text to log, and "
  • ", desired text to log, and \"
  • \", desired text to log, and \"

Optionally at the very, very line end:

  • ;

Doesn't Match:

At line start:

  • Some other text without spaces and then one of the sequences in the "Does Match" section
  • One of the sequences in the "Does Match" section but without a space or newline afterward

At line end:

  • No quotes or 1 to infinity quotes on only one side surrounding desired text to log
  • ' instead of " for quotes anywhere

Optionally at the very, very line end:

  • Nothing edited here will make the console RegExp not match

Recommended Usage

  1. Type console "your text here"
  2. Press "Run!"
  3. Check the browser's console (Ctrl+Shift+I or Command+Shift+I) and press "Console"