String.replace() like a pro

Savchenkov Dmitry — Wed, 26 Jan 2022 20:17:50 +0000

String.replace is a great tool to use for string formatting.
But, not any task can be solved with a simple substring replacement. Thankfully, replace method provides us with some more advanced functionality.

Replacement patterns

Let's write a function that accepts an array of 10 integers (between 0 and 9), and returns a string of those numbers in the form of a phone number.

const formatPhone = phoneInput => {
  return phoneInput
    .join('') // converting array into a string 
    .replace(/(\d{3})(\d{3})(\d+)/, '+1 ($1) $2-$3')
}

formatPhone([2,0,2,5,5,5,0,1,3,1]) // +1 (202) 555-0131

Here we declared 3 groups in our RegExp and then pass them according to their order number to a new substring.

You can easily use named groups as well. For example, let's create a function that formats day-month-year date input to year/month/day string.

Yes, I know that there are better ways to format a date string, but it's a great example of using named replacement patterns.

const formatDate = dateInput => {
  return dateInput.replace(
    /(?<day>\d{2}).?(?<month>\d{2}).?(?<year>\d{4})/,
    '$<year>/$<month>/$<day>'
  )
}

formatDate('26-01-2022') // 2022/01/26

If you have never used named capturing groups in RegExp you can check MDN documentation.

Passing function as a parameter

I personally think that this approach is more obvious and what more important it's easier to test and maintain.

We can pass a function that accepts each substring and returns its modified version.

As an example, we create a function that converts cameCase to a snake_case.

const camelCaseReplacer = pattern => {
  return `_${pattern.toLowerCase()}`
}

const camelCase = 'someVariableName'
camelCase.replace(/[A-Z]/g, camelCaseReplacer) // some_variable_name

These techniques will help you to solve almost any string formatting challenges, so don't hesitate to use them.

COVID-19 volunteers project

Savchenkov Dmitry — Fri, 01 May 2020 02:29:24 +0000

Excited to share a volunteers platform powered by Twilio SMS and Voice handling services. It was fun taking part in #twiliohackathon 🤓

What I built

I build a service for helping people address their issues during quarantine time or in any other cases when help is required by finding volunteers who are ready to help.

Sign up as a user or a volunteer 🙋🏻

Choose a role and verify your phone number with an SMS code from Twilio!

Create a new task ✨

You're not alone! There're people ready to help you just need to ask

Or offer your help 👨🏻‍🎤

You are a rock star! We will immediately inform user vie SMS that you're ready to help.

Make a phone call directly from the website 🤯

As soon as click "I'm ready" we will put you through with your volunteer.

Demo Link

There is still plenty of work to do, but I hope you enjoy it
Volunteers project 🚀

There are some test users if anyone wants to try it

      {
        "phone": "+11111",
        "role": "Volunteer"
      },
      {
        "phone": "+11112",
        "role": "User"
      },
      {
        "phone": "+11113",
        "role": "User"
      },
      {
        "phone": "+11114",
        "role": "Volunteer"
      },
      {
        "phone": "+11115",
        "role": "Volunteer"
      },
      {
        "phone": "+11116",
        "role": "User"
      }

Password is fake-password

Link to Code

Backend
Frontend

How I built it

Thanks Twilio team for supporting this event and providing a great opportunity to play around with their SDK. That was fun.

Technologies

Backend is built using NestJS with MongoBD and GraphQL.
Frontend is built on NextJS with TypeScript, ApolloClient and Mapbox GL as maps provider.

DEV Community: Savchenkov Dmitry