How to parse specific parameters from string urls or API response data using RegEx in bubble

Objective: Learn how to parse specific parameters from string urls or API response data using RegEx in bubble.

Introduction: RegEx – which stands for regular expression – is very popular in the world of coding. It is often used to identify character patterns but is not often explained very well. We will attempt to explain it here by using a real-life example in two steps:

1. Parse the API Response for a parameter.
2. Decode the data so that it is readable for our purposes. (when needed )

Note: This guide does not cover API calls, extensive workflow or database setup.

Requirements: A bubble.io account.

Bubble Version: 7

Demo – quikStarts parse specific parameters from string urls or API response

Source – quikStarts parse specific parameters from string urls or API response

Start

1. Identify that the parameter/s that you need are included in the string. In this case, we will be seeking to recover the paying customer’s email address highlighted in the image below.
   • 
   • Note: This is an actual example of a String of data returned from a PayPal Checkout API response (GetExpressCheckoutDetails) containing several parameters. This technique can also be used with a URL string.

Define the RegEx pattern

1. We need to define the RexEx pattern that we will place in bubble later in this guide. Visit regexr.com – https://regexr.com/.
   • 
   • Note: If you use RegEx or thing that you will in the future, we recommend that you save this data by creating an account at RegExr.com.
2. Define the pattern that matches the parameter that you want to extract.
   • Note: bubbles reference contains minimal information but does reference important syntax that we will use in this example – https://bubble.io/reference#Data.Messages.text.extract_regex .
   • Note: Specifically look at RegEx pattern ‘@\S+’
   • Where it gets tricky, is that there is no one way to accomplish this step as a beginner. Basically, you can work with the steps outlined on regexr.com. It may still not be very clear. Proceed to see how we handle this process.
     • 
3. Copy the entire string / API Response that needs to be parsed and paste it into the section outlined in the above image at RegExer.com.
   • 
4. In the expression field, remove the default syntax. Then type the name of the parameter that you would like to capture along with its preceding character followed by ‘=’. In our case, the parameter is preceded by ‘&’ so we would type – “&EMAIL=”.
   • 
   • Note: In realtime, the words that you typed are matched in the body of your string.
5. The next step is a bit more challenging because the data that we need to capture is dynamic data and we have no way to know what it will be. The beauty of RegEx is that we will use it’s syntax to capture this data despite it being dynamic. We know we need to capture everything after the ‘EMAIL=’ but before the next ‘&’. Using the “cheatsheet” tab to the left, we can identify the syntax.
   • Note: Remember when capturing this data, that it may be encoded making some of the characters appear different than what you expect. This may be referred to as encoding, URL encoding, or percent-encoding and there is an easy way to decode that we will cover in the next section.
6. Ultimately the syntax we will use for RexEx in bubble is – &EMAIL=(.+?)&. Why? Here we break the syntax down into detail with explanations:
   • “&EMAIL=” – ‘&’ is a known parameter separator.
   • “EMAIL” – is the name of the parameter.
   • ‘=’ – is the equals sign that will be followed by a value for the “EMAIL” parameter.
   • “( )” – is a regex class for capture group. Meaning anything inside of the parentheses is a part of the group.
   • ‘.’ – means any character in the same line. Not on a newline.
   • ‘+’ – match one or more of the preceding token.
   • ‘?’ – makes the preceding quantifier lazy, causing it to match as few characters as possible.
   • ‘&’ – Important. This trailing ampersand was used to tell RegEx where to stop searching since in this case, it represents the start of the next parameter “PAYERID”.
   • Note: We determined that there were other combinations of the syntax that worked as well. E.g. “&EMAIL=.+?&”, returned the same results. So be advised that there may be more than one way to achieve your goal. Testing is the best approach.
7. You should now have RegEx syntax that identifies your parameter and its value that can be used in bubble.

Using the RegEx syntax in bubble

Note: If you have not already, you should have a field in the database prepared to capture and hold the value of the parameter after it has been parsed. We will not cover database setup and workflow in detail as it is outside of the scope of this guide.

1. We are going to illustrate the following using the API call response identified above:
   • Parse the API response data for the value of a specific parameter (EMAIL).
   • Store the value of that parameter in the database using a simple form with one input field and one button.
   • Display it on the screen.
2. Create a form in bubble that contains an input field and a button.
   • 
3. Use the proper RegEx syntax identified earlier and in your bubble editor launch the workflow, for the button.
   • 
4. Click “Click here to add an action”, select “Create a new thing…”.
   • 
5. Drill down to the list of choices for populating the database with a value.
   • 
6. After that source has been identified, select the “:extract with Regex” option.
   • 
7. At this point, we have successfully used RegEx to parse the parameter that we want out of a string of parameters returned by the API.
   • 
   • Note: The issue at this point is that although RegEx did it’s job, the data is still encoded, contains ‘&’s, and does not serve our purposes yet.
8. Append the “Find&Replace” function to “:extract with Regex” (step 6) – as many times as you need to – to replace and remove unwanted characters. We will do one here as an example for “EMAIL”.
   • Note: Perform all clean-up functions before inserting the data into the database.
9. After appending “Find&Replace”, enter “EMAIL=” in the “Text to find” field and leave the “replace” field blank. Click “Close”.
   • 
10. When the workflow runs, it should parse the value of the parameter and insert it into your database. You should now have successfully extracted, parsed, and stored the email address in the database in bubble.
    • 
11. END