How to: Use the REGEXEXTRACT Regular Expression Formula

Regular Expression (RegEx) is a set of external library formulas you can use in Unqork. Regex is a complex set of rules that control the patterns of strings as they're entered into a field. You can use Regex to control what the end-user can enter into input fields in your application.

RegEx is a character sequence that describes what pattern a string must follow. One of the most common places you'll find RegEx is when signing up for a website. During the sign-up process, websites might prompt you to enter a password with specific characters. If you enter a password that does not meet the specified criteria, you receive an error response.

RegEx can also manipulate the information that an end-user enters into a field. Using the REGEXEXTRACT formula, you can separate pieces of a larger string. You’ll specify your requirements in the formula, then the formula returns only the piece of your original string that matches. For example, let’s say an end-user enters their full name in a text field. You can use the REGEXEXTRACT formula with a Calculator component to separate the full name into first and last name values.

In this how-to guide, you'll learn how to use the REGEXEXTRACT formula in a Calculator component to separate an end-user's full name into separate values.

Select the tab that corresponds to your Unqork Designer experience:

UDesigner

Classic Designer

Adding Input Fields

Begin by adding a Text Field component so your end-user can enter their full name. Then, add two more Text Field components to display your end-user's first and last names after it's split. These two Text Field components are disabled from end-user input and act only as outputs for the Calculator component.

Configure the `fullName` Text Field Component

In the Module Builder, drag and drop a Text Field component onto your canvas.
In the Property ID field, enter fullName.
In the Label Text field, enter Full Name.
Click Save Component.

Configure the Columns Component

Next, add a Columns component to organize the Text Field components you’ll add next.

Drag and drop a Columns component onto your canvas, placing it below the Text Field component.
In the Property ID field, enter colSplit.
Click Save Component.

Configure the `firstName` and `lastName` Text Field Components

Next, you’ll add two Text Field components to display the first and last name of your end-user.

Drag and drop two Text Field components onto your canvas, placing one in each column of your Columns component.
In the Property ID and Label Text fields, enter the following for each component:
#
Property ID
Label Text
1
firstName
First Name
2
lastName
Last Name
Click Save Component for each component as you add it.

#	Property ID	Label Text
1	firstName	First Name
2	lastName	Last Name

Here's how these components look in the Module Builder:

Configuring REGEXEXTRACT in a Calculator Component

To split your end-user's name, you'll use a Calculator component with the REGEXEXTRACT formula. You'll use the end-user's Full Name entry as the Calculator component's input and separate the first and last names into new fields.

The REGEXEXTRACT formula uses the following syntax: REGEXEXTRACT(stringToCheck,regularExpression). The REGEXEXTRACT returns the part of a string that matches the regular expression. If there's no match, it outputs a null value. This formula is different from REGEXMATCH, which returns a Boolean value.

Let's explore the regular expression for isolating your first and last name. Here's what the regular expression looks like to retrieve your end-user's first name:

([^\s]+)

Here's a breakdown of what each character in this expression represents:

( ): Indicates the input is a single string.
[ ]: Indicates the allowable characters in the string.
^: Indicates the beginning of the string.
\s: Indicates that any character but white space is allowed. This syntax is how the formula knows where to split your end-user's full name.
+: Indicates that there can be any number of characters, but there must be a minimum of one.

With this regular expression, your REGEXEXTRACT formula only returns what comes before a white space in your end-user's response. Your final formula looks like the following: =REGEXEXTRACT(full,'([^\s]+)').

Next, let's look at the regular expression that retrieves your end-user's last name:

(\s[\S]+$)

Here's a breakdown of what each character in this expression represents:

( ): Indicates the input is a single string.
\s: Indicates a white space. Placing this syntax as the first character in your formula means the returned string begins with white space.
[ ]: Indicates the allowable characters in the string.
\S: Indicates that any character that is not white space is allowed.
+: Indicates that there can be any number of characters, but there must be a minimum of one.
$: Indicates the end of the string.

With this regular expression, your REGEXEXTRACT formula only returns what comes after the white space in your end-user's response. Your final formula looks like the following: =REGEXEXTRACT(full,'(\s[\S]+$)').

You might be wondering what happens if an end-user's entry has more than one space. Based on the above formulas, additional spaces do not change your output. Your first name regular expression returns only characters before the first white space. Your last name regular expression returns only characters after the last white space. So, a middle name would be left out of your final result.

Configure the Calculator Component

Now that you know the REGEXEXTRACT formula, let's configure your Calculator component. As a reminder, your Calculator component takes your end-user's full name, compares it against both formulas, and splits it into separate fields.

Drag and drop a Calculator component onto your canvas, placing it between your fullName Text Field and colSplit Columns component.
In the Property ID and Canvas Label Text fields, enter calcExtractNames.
In the Outputs table, enter the following:
#
Source
Formula
1
firstName
=REGEXEXTRACT(full,'([^\s]+)')
2
lastName
=REGEXEXTRACT(full,'(\s[\S]+$)’)
Click Save Component.

#	Source	Formula
1	firstName	=REGEXEXTRACT(full,'([^\s]+)')
2	lastName	=REGEXEXTRACT(full,'(\s[\S]+$)’)

Configure the Button Component

Add a Button component to trigger your Calculator component.

Drag and drop a Button component onto your canvas, placing it above your Columns component.
In the Property ID field, enter btnExtractNames.
In the Label Text field, enter Extract Names.
From the Action Type drop-down, select Event.
From the On Click drop-down, select calcExtractNames.
Click Save Component.
Save your module.

Here’s how your completed module looks in the Module Builder:

Preview your module in Express View and enter your full name in the Full Name field. Then, click the Extract Names button. Your name splits and displays in the First Name and Last Name fields.

Adding Input Fields