Use regular expression to replace all from colon to comma

Question

I am writing a regular expression that will target everything to the right of ":" and to the left of a ","

I am using this RegExp:

:(.*?)(,|})

This works well for the most part, except when the expression runs into objects that are on the right side of the ":"

For example, on a list of prop type definitions in TypeScript:

  open: boolean,
  onDidDismiss: () => void,
  message: string,
  showAddReceiptModal: boolean,
  showModal: (value: (((prevState: boolean) => boolean) | boolean)) => void,
  vehicleTabRef: React.MutableRefObject<null>,
  onReceiptSubmit: (data) => void,
  vehicle: any,
  showModal1: boolean,
  showModal2: (value: (((prevState: boolean) => boolean) | boolean)) => void,
  selectedReceipt: { __typename: "Receipt" | undefined; id: string | undefined; purchaseDate: string | undefined; sellerName: string | undefined; sellerAddress: string | undefined; sellerCity: string | undefined; sellerState: string | undefined; sellerZipCode: string | undefined; totalAmount: number | undefined; gallonsPurchased: number | undefined; image?: string | null | undefined | undefined; userID?: string | null | undefined | undefined; vehicleID: string | undefined; vehicle?: Vehicle | null | undefined | undefined; taxRefund?: number | null | undefined | undefined; createdAt: string | undefined; updatedAt: string | undefined },
  onClick: () => void,
  onClick1: () => void,
  dataEditing: boolean,
  toastMessage: (val) => void,
  editing: (bool) => void,
  showToast: (bool) => void,
  showModal3: boolean,
  showModal4: (bool) => void,
  dateFilter: { startDate: string; endDate: string },

When I run replaceAll with this regex, and the replacement is a comma I am left with this:

  open,
  onDidDismiss,
  message,
  showAddReceiptModal,
  showModal,
  vehicleTabRef,
  onReceiptSubmit,
  vehicle,
  showModal1,
  showModal2,
  selectedReceipt,                                                 
  , 
  onClick, 
  onClick1, 
  dataEditing,
  toastMessage, 
  editing, 
  showToast, 
  showModal3, 
  showModal4, 
  dateFilter, 
  ,

Notice the empty commas, these should not be here. This expression should target everything to the right of the ":" and replace it all with a comma.

What regex can I use to only remove everything to the right of the : to the ending comma, and just leave that comma?

Why not just grab text before first `:` ? – anubhava Sep 26 '22 at 19:38 — anubhava, Sep 26 '22 at 19:38

sniperd · Answer 1 · 2022-09-26T19:45:24.430

2

:[^,]*, replace with ,

That should do it. That is the colon, everything non comma up the the comma, and then the comma.

https://regex101.com/r/s1KI9j/1

Or this:

:[^,]* replace with nothing

https://regex101.com/r/ty4ixU/1

edited Sep 26 '22 at 19:45

answered Sep 26 '22 at 19:42

sniperd

5,124
6
28
44

he wants to remove everything to the right of the colon, not select it – Nicholas Hansen-Feruch Sep 26 '22 at 19:44

score 2 · Answer 2 · answered Sep 26 '22 at 19:44

So, just use /:(.*?),/g and remove |} from the regex.

const result = `
  open: boolean,
  onDidDismiss: () => void,
  message: string,
  showAddReceiptModal: boolean,
  showModal: (value: (((prevState: boolean) => boolean) | boolean)) => void,
  vehicleTabRef: React.MutableRefObject<null>,
  onReceiptSubmit: (data) => void,
  vehicle: any,
  showModal1: boolean,
  showModal2: (value: (((prevState: boolean) => boolean) | boolean)) => void,
  selectedReceipt: { __typename: "Receipt" | undefined; id: string | undefined; purchaseDate: string | undefined; sellerName: string | undefined; sellerAddress: string | undefined; sellerCity: string | undefined; sellerState: string | undefined; sellerZipCode: string | undefined; totalAmount: number | undefined; gallonsPurchased: number | undefined; image?: string | null | undefined | undefined; userID?: string | null | undefined | undefined; vehicleID: string | undefined; vehicle?: Vehicle | null | undefined | undefined; taxRefund?: number | null | undefined | undefined; createdAt: string | undefined; updatedAt: string | undefined },
  onClick: () => void,
  onClick1: () => void,
  dataEditing: boolean,
  toastMessage: (val) => void,
  editing: (bool) => void,
  showToast: (bool) => void,
  showModal3: boolean,
  showModal4: (bool) => void,
  dateFilter: { startDate: string; endDate: string },`.replace(/:(.*?),/g, ',');
  
  console.log(result)

score 1 · Answer 3 · answered Sep 26 '22 at 19:43

1

https://regex101.com/r/zsVy2d/1

(^|,)[^:]+ is the expression I used

answered Sep 26 '22 at 19:43

Nicholas Hansen-Feruch

974
8
16

score 1 · Answer 4 · answered Sep 26 '22 at 19:49

I'm sure regex is not the best option for this. It looks a little bit like parsing HTML with regex see here.

But if regex is your only option and the data always looks like this (the important thing is that there is only one relevant element per line) than this should fix your regex, just search for line ending ($) after your second group.

:(.*?)(,|})$

Use regular expression to replace all from colon to comma

4 Answers4