Sign in
Log inSign up

My Blog is Evolving...Into Something Else

Milos Protic's photo
Milos Protic
·Jun 5, 2019

Introduction

Not that long ago, I began my blogging journey. The experience was and still is, a great one.

As a developer, I always strained towards practical knowledge, and my main focus was on the continuous improvement of the code I write. I started writing my articles in a more practical manner, with code samples in focus, providing fully working code at the end which turned out useful for developers.

coding

The Changes

This led me to an idea to write even more code-oriented articles, and I added a cheat sheet section on my blog. You can check it out here later. At this point, it shows cheat sheets created by the site admins, but the plan is to add a search page for all publicly (because users can create a private one) accessible cheat sheets.

If you think about it, we are always googling for code samples, and it's not that rare the situation when we keep googling for the same thing over and over again because our brain cannot remember it.

repeat

I started thinking, what if we could keep it all in one place? What if we could write a code snippet somewhere, in our own coding style, and save it for the future reference? Not just that, we could store links found after hours of searching and googling on the web, links toward useful articles and much more...

I didn't want a repository, I didn't want an article, or anything too complicated, I just wanted to place a small helper function that I know it will be used again later.

The whole idea is to reduce the repetition we do on a daily basis and to have a personal knowledge database that can be shared with others or kept private.

cheatsheet

A future plan is to create team sheets, cheat sheets for teams to be managed and shared between the team members (if the cheat sheets prove as a useful feature of course).

At the same time, I've written a couple of articles that provided great value to the readers considering that one of them was read more than 25000 times and issued in the JavaScript weekly newsletter.

Newsletter link. It's the last one, JavaScript Clean Code: Some Best Practices Article link

This led to users signing in and using the site, which made me feel great, because, in my opinion, there is nothing better than readers finding your writings valuable.

I was caught a bit off guard considering that I don't have features like comments section implemented, but it's coming up. In the end, I'm just an engineer wanting to help others and be a part of the ecosystem.

To keep this article code-oriented, as always, here is a JavaScript regex cheat sheet:

Testing Methods

  • Method test

  • Executes a search for a match within a given string. Returns true or false

    /string/.test("My string"); // outputs true

  • Method match

  • Searches a given string for a match, and returns the matches in form of an array
    "My string".match(/string/); // outputs "string" as the first match
// ["string", index: 3, input: "My string", groups: undefined]

Globals

Ignoring Case

  • The i flag
  • Ignores case within the string, makes the regex case insensitive
    const str = "Find MY STriNg";
const regex = /my string/i;
str.match(regex); // "MY STriNg"

Global Lookup

  • The g flag
  • Searches for a pattern throughout the string and returns an array of found items
    const str = "This this THis THIS";
const regex = /this/gi;
str.match(regex); //  ["This", "this", "THis", "THIS"]

Pattern Matching

  • Starts with operator ^

  • Matches the characters at the beginning of a string

    const str = "My String";
const regex = /^My/;
str.match(regex); // "My"

  • Ends with operator $

  • Matches the characters at the end of a string

    const str = "String My";
const regex = /My$/;
str.match(regex); // "My"

  • The dot (wildcard) operator .

  • Matches any character, except newline

    const str = "Wildcard find yard, card";
const regex = /.ard/gi;
str.match(regex); // ["card", "yard", "card"]

  • The or operator |

  • Matches multiple patterns within a given string

    const str = "My string to test, find this and that";
const regex = /this|that/gi;
str.match(regex); // ["this", "that"]

  • The word operator \w

  • Matches all letters

    const str = "My String12 2String";
const regex = /\w/gi;
str.match(regex); // ["M", "y", "S", "t", "r", "i", "n", "g", "1", "2", "2", "S", "t", "r", "i", "n", "g"]

  • The not word operator \W

  • Matches all non-letter characters including whitespace

    const str = "My String _$*! 2String";
const regex = /\W/gi;
str.match(regex); // [" ", " ", "$", "*", "!", " "]

  • The digit operator \d

  • Matches all digits

    const str = "My String12 2String";
const regex = /\d/gi;
str.match(regex); // ["1", "2", "2"]

  • The not digit operator \D

  • Matches all non-digit characters including whitespace

    const str = "My String12 2String";
const regex = /\D/gi;
str.match(regex); // ["M", "y", " ", "S", "t", "r", "i", "n", "g", " ", "S", "t", "r", "i", "n", "g"]

  • The whitespace operator \s

  • Matches all whitespaces

    const str = "My String12 2String";
const regex = /\s/g;
str.match(regex); // [" ", " "]

  • The not whitespace operator \S

  • Matches all except whitespaces
    const str = "My String12 2String";
const regex = /\S/g;
str.match(regex); // ["M", "y", "S", "t", "r", "i", "n", "g", "1", "2", "2", "S", "t", "r", "i", "n", "g"]

The list operator []

The output depends on what you put in between the brackets.

  • Match any of

    const str = "lit fit git";
const regex = /[lfg]it/g;
str.match(regex); // ["lit", "fit", "git"]

  • Match between characters

    const str = "lit fit git";
const regex = /[g-l]it/g;
str.match(regex); // ["lit", "git"]

  • Match numbers and letters

    const str = "My String 123 % test *!";
const regex = /[a-z0-9]/gi;
str.match(regex); // ["M", "y", "S", "t", "r", "i", "n", "g", "1", "2", "3", "t", "e", "s", "t"]

Quantifiers

Quantifiers can be greedy or lazy, depending on the regex definition. A greedy quantifier causes the regex engine to match as many occurrences of the given patterns as possible and vice versa, a lazy quantifier causes the engine to match as few occurrences as possible. Some of the greedy quantifiers are ?, \?, *, + and some of the lazy ones are ??, *?, +?.

  • Match zero or more *

    const str = "code";
const str2 = "codeeeee";
const str3 = "codeecode";
const str4 = "nomore";
const regex = /code*/gi;
str.match(regex); // ["code"]
str2.match(regex); // ["codeeeee"]
str3.match(regex); // ["codee", "code"]
str4.match(regex); // null

  • Match one or more +

    const str = "codeeeee";
const str2 = "codede";
const regex = /e+/gi;
const regex2 = /d+/gi;
str.match(regex); // ["eeeee"]
str2.match(regex2); // ["d", "d"]

  • Match zero or one ?

    const str = "codeeeee";
const regex = /cod[a-z]?/gi;
str.match(regex); // ["code"]

  • Match n times {n}

    const str = "codeeeee";
const regex = /cod[a-z]{3}/gi;
str.match(regex); // ["codeee"]

  • Match atleast n times {n,}

    const str = "codeeeee";
const regex = /cod[a-z]{2,}/gi;
str.match(regex); // ["codeeeee"]

  • Match between n and m times {n,m}

    const str = "codeeeeee";
const regex = /cod[a-z]{1,3}/gi;
str.match(regex); // ["codeee"]

    Check out the full list here.

I encourage you to go and create your first cheat sheet. Of course, you can write it in markdown.

Thank you for reading and see you in the next article.

2