DEV Community: Rutkat

Get to know React Expo to build Mobile Apps

Rutkat — Thu, 08 May 2025 05:35:12 +0000

An intro to mobile app development

In case you want to develop a mobile app very quickly for Android or IOS, this is the guide for you. I'll explain common methods of developing a mobile app and how you can benefit with free tools. The important reasons why you should make a mobile app today are:

To grow your audience reach
To add another revenue channel for your business
To improve customer experience and convenience

Having just a website is okay too, but you will probably want to grow your business sooner or later. Don't worry, we're not going to produce this code with AI just because AI is trending nor do we want AI slop. The goal of this article is to show you the options you how quickly you can deploy a mobile app using React Expo which can be seen at http://expo.dev

As a pre-requisite, you should have knowledge of the functionality of websites, installing software on Mac or Windows, and using the terminal command line. This is more of a quickstart guide so it's not code heavy.

Approach

The first approach is to understand the options available to build mobile apps. The obvious platforms are Android and iOS which have their own unique app ecosystems. The origins of iOS app development started with Objective-C which evolved to Swift and Dart programming languages. For Android, it's Java and Kotlin. Those are known as the native programming languages that get you the best possible performance for mobile device hardware yet are the most intricate to build with. You don't need to use these languages unless you intend to have a full-time Android or iOS development career.

There are tools and languages available which can convert your website and web app into a mobile app without the hassle of using Java or Swift. The tradeoff is app performance and access to all hardware features if you choose the alternate methods. Those mobile app building methods can be:

So far I've tried building with Ionic, React Native and LynxJS. Follow me @therutkat for my upcoming comparison article. I can tell you that recent changes to the React Native architecture have convinced me to follow their path to building an app. They say that the app performance is very near to that of the native coding language. In addition, the React Expo ecosystem for faster testing and deployments for Android+iOS is helps your workflow tremendously.

The biggest lie is thinking that React Native is akin to coding in ReactJS. It is not and I don't think the name "React" should even be used in "React Native". I'll go as far as to provide this analogy: "Javascript is to Java" as "ReactJS is to React Native".
That's my opinion so don't be offended. There are actually a few shared concepts between React Native such as page routing, import statements, and function logic.

Building Steps

In the following process, you'll learn to:

Install React Expo SDK 53
Start a project
Debug/Test with the Expo emulator
Deploy app with EAS

What do we want to accomplish? A mobile app but a really basic app for learning purposes. So does it matter if the app loads content from the internet or the phone itself? The early app-generator frameworks were just placing wrappers around GUIs, websites and other elements; essentially websites wrapped by mobile apps. This is what we are going to do giving you exposure to React Expo so you can get a taste of it without dedicating time to build a full-fledged React Native app.

Afterwards, I'll show you the commands to test your app locally (real-time previews), on your phone and generate the necessary files to do a real installation of the app. Without React Expo, you would have to install Android Studio which is ~7gb in size and compile or build code to see each change. This is unlike web development which has a smoother workflow.

Here are 2 amazing parts that speed up making a mobile app unlike any other:

npx create-expo-app myNewApp creates your app boilerplate
eas build --platform all builds your app file for deployment to the app store

Now for the quickstart guide to create a mobile app based of a website. We're going to use the webview method to render our website inside the React Native code. This is in no way the best method to build an app; I am simply demonstrating the conveniences and speed of the process using React Expo.

Ensure you have NodeJS installed including npm & npx so you can run the appropriate commands. Download NodeJS here and then install npx with the global flag:
npm install -g npx

Now install the boilerplate code provided by Expo:

npx create-expo-app myNewApp
cd myNewApp

cd myNewApp and see the project folders and files:

Next, install the webview component by command line. This is how 95% of adding parts to your app looks like.

npx expo install react-native-webview

Navigate to your webview/app/(tabs) folder and delete explore.tsx and replace the contents of index.tsx. We won't use those.

import { WebView } from 'react-native-webview';
import { StyleSheet } from 'react-native';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}
// Styling
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
});

After you replaced the index.tsx file you can preview your project in the browser and android phone by the command:

npx expo start

This screen shows the benefits of running one React Expo command which doubles as your local web server, allows you to open Android Studio, iOS simulator, reload the app, etc.

Type "w" and your browser will open with an error.

React Native WebView does not support this platform.

This occurs because, ironically, the webview feature does not load the website from your code as shown source={{ uri: 'https://expo.dev' }} because it's not Android. So the next step is to preview the app on your android with "Expo Go" instead of Android Studio. Download Expo Go from the Google Play Store.

Then connect WIFI on your phone to the same network as your computer. This is what the Expo Go app looks like.

Scan the QR code with your phone, make sure internet is available and your app should render the website https://expo.dev.

If you're satisfied with your app, then build it and submit it to the app store. Ensure you have an account on Expo, there's a free plan available.

Use the command below and Expo.dev will generate the build files for you:

eas build --platform all

Build an anti-spam, double opt-in Email form with Python

Rutkat — Wed, 14 Aug 2024 02:57:32 +0000

So you want to build an app and get many users?

We all do and if you're a beginner you need to take the following email sign-up features into consideration.

Filtering input for a valid email address
Double opt-in sign-up
Bot/spam prevention

A solid email sign-up form is essential for web apps, newsletters, freebie downloads, invites to private groups, and lead generation. It allows you to collect valid email address and establish personal communication without relying on social media or other platforms. Do respect the email data and abide your region's anti-spam regulations such as the can-spam act.

Let's not rely on using 3rd party services such as Auth0, Facebook, or Google to have access to your app and services which can shut your down at any given time. Keep your app data yours!

Starting off, you should have some experience in Python because we're going to use the Flask framework with a MySQL database. This is going to be more fun (maybe) than using Wordpress, the most popular CMS. You would have to pay for some Wordpress plugin to have the same capability as a free Flask extension. I've build previously built on Wordpress (PHP) and prefer Python Flask for web apps even though Wordpress is very capable of making web apps.

We're going to use existing Python modules which simplify cleaning user input, generating a verification link, and communicating with the database.

Each code snippet will be explained and include some comments in the code. In case you haven't build user-registration or know of the inner workings, I will describe the details for you and then you can see the final code at the end (don't skip ahead).

Here is a summary of the features we will implement as stated in the first paragraph:

A valid email address can be checked by parsing the input string from the user using a regular expression or a Flask extension. We won't allow random text nor SQL injection type of hacks.
The double opt-in method requires the recipient to give permission for you to email them by receiving a validation link to their inbox. This is mainly used to prevent someone else from using your email address. This also prevents test users who just sign-up and abandon their accounts.
Bot prevention can be done with a hidden field that is not shown to the user but is commonly auto-filled by bots crawling for vulnerable sign-up forms but it is not as reliable is a "captcha" from a 3rd party service.

Let's code it out!

Create a working directory:

mkdir signup
cd signup

Create your Python environment using python3 -m venv signup or conda create -n double-opt-contact python3. I prefer conda and if you want to learn more you can read my Python environments article.

Install the following dependencies:
pip flask flask-mail secure SQLAlchemy Flask-WTF Flask-SQLAlchemy mysql-connector-python bleach
Alternatively, you can have the same dependencies listed in a requirements.txt file and run pip install -r requirements.txt

Create app.py file with the following dependencies included:

from flask import Flask, render_template, request, url_for, redirect, flash
from flask_mail import Mail, Message
from datetime import datetime
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy.sql import func
from itsdangerous import URLSafeTimedSerializer, SignatureExpired
import secrets
import bleach

Initialize the app object with default template folder location:

app = Flask(__name__, template_folder='templates')

Enter your own server configuration data using these lines:

# Flask configurations
secret = secrets.token_urlsafe(32)
app.secret_key = secret
app.config['SECRET_KEY'] = secret # auto-generated secret key

# SQLAlchemy configurations
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+mysqlconnector://admin:user@localhost/tablename'

# Email configurations
app.config['MAIL_SERVER'] = 'smtp.example.com'
app.config['MAIL_PORT'] = 465 #check your port
app.config['MAIL_USERNAME'] = 'your_email@example.com'
app.config['MAIL_PASSWORD'] = 'your_password'
app.config['MAIL_USE_TLS'] = True
app.config['MAIL_USE_SSL'] = False

db = SQLAlchemy(app)
mail = Mail(app)
sserialzer = URLSafeTimedSerializer(app.config['SECRET_KEY']) #set secret to the serliazer

Ultimately, you should have your config info in a .env file.

We will need a MySQL database to store users which can be created manually or by Python code. As part of the learning process, you can enter the following code using the command-line or using Python's with app.app_context() db_create_all() method.

The validated field is for a token string which allows the double opt-in technique.

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    email VARCHAR(120) NOT NULL UNIQUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    validated BOOLEAN DEFAULT FALSE
);

The next section uses SQLAlchemy's ORM structure to query the database for you. Take note that the class name should match your database table name otherwise you'll get an error. The db.model represents your table settings which include the column name, it's type, length, key and null value:

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(120), unique=True, nullable=False)
    created_at = db.Column(db.DateTime, server_default=db.func.now())
    validated = db.Column(db.Boolean, default=False)

If you haven't manually created the MySQL database table already, you can do it with this Flask code directly after the class User code block:

# Create the database table
with app.app_context():
    db.create_all()

For brevity of this tutorial, we're skipping the index page or what you would want to call your app homepage and just show the sign-up page using Python's decorator function for the page route, but first we need an html template for the front end to render. The braces {} allow for python code inside the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Sign Up</title>
</head>
<body>
    <h1>Sign Up</h1>
    <form action="{{ url_for('signup') }}" method="POST">
        <input type="email" name="email" placeholder="Enter your email" required>
        <input type="submit" value="Sign Up">
    </form>
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <ul>
          {% for category, message in messages %}
            <li>{{ message }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}
</body>
</html>

Now we enter the back-end code which are 2 pages/routes (index, signup), the email message, and confirmation. The signup page includes the GET/POST methods which allow the form to be submitted. The bleach object is Python extension that cleans the input from the user to ensure security and mitigating malicious scripts. Then the sserializer generates a one-time token to email the verification link.

@app.route('/')
def index():
    return '<h1>Index page</h1>'

@app.route('/signup', methods=['GET', 'POST'])
def signup():
    if request.method == 'POST':
        email = bleach.clean(request.form.get('email'))

        # Insert user into the database
        new_user = User(email=email)
        try:
            db.session.add(new_user)
            db.session.commit()
        except Exception as e:
            print(f"Error occurred saving to db: {e}")

        # Send confirmation email
        token = sserialzer.dumps(email, salt='email-confirm')
        msg = Message('Confirm your Email', sender='your_email@example.com', recipients=[email])
        link = url_for('confirm_email', token=token, _external=True)
        msg.body = f'Your link is {link}'
        try:
            mail.send(msg)
        except Exception as e:
            print(f"Error occurred sending message: {e}")
            flash("Error occurred sending message!")
            return render_template('signup.html')  
        flash('A confirmation email has been sent to your email address.', 'success')
        return redirect(url_for('index'))
    return render_template('signup.html')

Before adding the html sign-up form, let's complete the backend by adding the route for validating the double opt-in feature. This route uses the s variable we created earlier which generates the time-sensitive, secret token. See the docs for details
The max age is the seconds before the link expires so in this case, the user has 20 minutes to confirm their email address.

@app.route('/confirm_email/<token>')
def confirm_email(token):
    try:
        email = sserialzer.loads(token, salt='email-confirm', max_age=1200)  # Token expires after 1 hour
    except SignatureExpired:
        return '<h1>The token is expired!</h1>'

    # Update field in database
    user = User.query.filter_by(email=email).first_or_404()
    user.validated = True
    db.session.commit()

    return '<h1>Email address confirmed!</h1>'

Now for the ubiquitous main statement which tells Python to execute the script if the file is being executed directly (as opposed to an imported module):

if __name__ == '__main__':
    app.run()

Your code should be working from this point when you run the flask command with debugging enabled. This will allow you to see any errors in the command line as well as the browser window:

flask --app app.py --debug run

Open your browser to the domain shown in the command-line (localhost) and the index page should render. Try to submit the form using a valid email address to receive the verification link. Once you get the link which should look like http://localhost:5000/confirm_email/InRvbUByYXRldG91cmd1aWRlcy5jb20i.ZteEvQ.7o1_L0uM9Wl8uii7KhJdiWAH, you can follow it and get the email address validated using the validator route shown here:

@app.route('/confirm_email/<token>')
def confirm_email(token):
    try:
        email = sserializer.loads(token, salt='email-confirm', max_age=1200)  # Token expires after 1 hour
    except SignatureExpired:
        return '<h1>Oops, the token expired!</h1>'

    # Update field in database
    user = Users.query.filter_by(email=email).first_or_404()
    user.validated = True
    try:
        db.session.commit()
    except Exception as e:
        print(f"Error occurred saving to db: {e}")

    return '<h1>Email address confirmed!</h1>'

This route accepts the token string previously sent to you and checks it to see if it matches the corresponding database entry. If it does, it updates the validated field to True and you can rest knowing your sign-up form wasn't abandoned.

This is an important step all successful businesses use in their registration systems and now you have it to. But wait, what if we get bots attacks submitting random email addresses without validating them. Then you will have a dirty database filled with useless entries. Let's prevent that!

To prevent bot attacks or at least mitigate the advanced once you can build your own time-consuming solution, include a IP limiter which requires an in-memory database such as redis or you can use a 3rd party service such as Google's captcha or hCaptcha.

In our tutorial, we will add hcaptcha's free plan. At the time of this writing, google's captcha isn't free and hcaptcha is. To have this functioning for your site, you need to register with them to get API key from hcaptcha.

We need new requirements so install them:
pip install flask-hcaptcha requests

Requests is needed to send the email address to hcaptcha for validation. Get the key and integrate hcaptcha's javascript file with your html signup form. Add the file to the head of your html page and your site key to your form:

<head>
   ...
   <script src="https://hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
   ...
   <form action="{{ url_for('signup') }}" method="POST">
       <input type="email" name="email" placeholder="Enter your email" required>
       <input type="submit" value="Sign Up">
       <div class="h-captcha" data-sitekey="b62gbcc-5cg2-41b2-cd5a-de95dd1eg61h" data-size="compact"></div>
   </form>

The site key in this code is an example, you will need your own from the free plan. This site key validates your form and inspects the site visitor with a comprehensive list of spam bots known by hcaptcha.

Next modify your app.py file to include the hcaptcha's secret key (not the site key) in the app.config object and post the response to hcaptcha prior to saving to your own database.

  app.config['HCAPTCHA_SECRET_KEY'] = 'your-secret-hcaptcha-key'
  ...
@app.route("/signup", methods=['GET', 'POST'])
def signup():
    if request.method == 'POST':
        email = bleach.clean(request.form.get('email'))
        hcaptcha_response = request.form.get('h-captcha-response')
        # Verify hCaptcha response
        payload = {
            'secret': app.config['HCAPTCHA_SECRET_KEY'],
            'response': hcaptcha_response
        }
        try:
            response = requests.post('https://hcaptcha.com/siteverify', data=payload, timeout=10)
            result = response.json()
        except requests.exceptions.RequestException as e:
            print(f"Request failed: {e}")

        if not result.get('success'):
            flash('CAPTCHA validation failed, please try again.', 'danger')
         ...
        # Insert user into the database
        new_user = Users(email=email)

Once this is done, you will have the hcaptcha icon showing in your sign-up form and it should be enabled preventing any spam. Now you have a more robust form for your new app.

In case you encountered any errors or you have a typo in the code you can check the completed code on my github.com

Follow and like for more!

How to manipulate text strings like a boss!

Rutkat — Fri, 16 Jul 2021 03:15:52 +0000

Have you wondered how censoring words on the internet occurs? Perhaps you want to know why your username on apps has to conform to specific rules? This is done through string manipulation using code such as javascript among many others.

A string is just a specific name used to label a piece of data which contains text and can consist of alpha-numeric characters mixed with numbers and symbols. Why is the important? Every software application with a presentation layer applies a form of string manipulation and it is the foundation to algorithms. Think how it applies to business ideas as well. Grammarly is an excellent example of a business that is all about string manipulation.

By the end of this article, you will have the ability to understand how text manipulation works. I will explain the ins and outs of string manipulation so you can think how code processes it. Don't worry, we won't discuss the bits and bytes of strings but rather the ways you can manipulate strings and how it is done. Also, I will use the terms string and text interchangeably without getting scientific. Remember that a practical example or analogy will help you memorize the specific ways needed to manipulate strings.

TEXT AND STRINGS

First thing to consider is how to engage text manipulation from a visual perspective. For example, if you're a non-coder or just a human being, you know you can write text on paper, on your smartphone, computer, and even rice. Okay maybe not rice. The writing can occur from left-to-right, top-to-bottom, right-handed, left-handed, etc. Afterwards, you can manipulate what you wrote with an eraser, scratching it out, or tapping the backspace key.

From a coder's perspective, it doesn't work the same way, except when writing the actual code. The code instructions for manipulating strings have restrictions and specific methods. You will learn these methods here but let's start with more of a visual approach to envision how code will do the magical transformations.

WHICH DIRECTION

Like writing, strings can be manipulated from left-to-right and right-to-left. The length of a string can be as little as a single space to pages of text, but most commonly in code, a string will not be longer than a sentence. A string can be a username, phone number, a snippet of code, a poem etc.

When working with a specific coding language, there are built-in methods to use or you can create your own custom method. A combination of these methods can manipulate text to do virtually whatever you want. You can become a string master with the force of practice.

Besides processing a string from left-to-right or right-to-left, it can be broken down and manipulated to individual characters using the number representing the position of any character. This is known as the index value of the string. For example, the string "Hello!" contains 6 characters, so your code can directly access any letter by indicating a corresponding index number.

"Hello!"
 123456 (number represents position)

TRAVERSING

Several coding methods will process the string in this ascending-numerical order however since computers compute with a basis of zero, the first item position is always 0. To be more accurate, I should state that the computer is traversing, not processing strings. The difference is that "processing" indicates an effect happens whereas "traversing" indicates a passage or travel across something.

When dealing with code instructions, you should be conscious about the computing resources utilized so you may not need to process every character in a string but rather traverse to the individual character you need to change.

For example, your objective is to remove punctuation so you have several approaches to remove the "!" From "Hello!". You can use a method to find the position of "!" or you can access the last character of the string. These methods include getting the length of the string, getting the index of "!" or traversing the string in reverse.

If use the length method, you have to remember to subtract 1 since computing starts with zero. Also spaces count as part of the string and will have an index position thus increasing the length of the string.

The INDEX number represents the position of a character in a string.

"Hello!"
 012345 character positions

"Hello!".length - 1
Length is a property of a string.

Here are methods to get the position of a character in a string:

"Hello!".indexOf("!")
Find the first position of a character searching from left-to-right.

"Hello!".lastIndexOf("!") 
Find the last position of a character searching from right-to-left.

"Hello!".length - 1
Find the last character in a string.

All give 5 as the result. You can do the opposite with the charAt() method which returns the character from a string specified by the position.

"Hello!".charAt(5)
Result is "!"

ONE CHARACTER

Now you know the basics of traversing a string one character at a time, which are from the left, from the right, and from the end using index numbers. However, not all methods return the position of the character you seek. You may prefer a result as a boolean data type instead. Meaning your search is a test which returns true or false.

Boolean test methods: includes, startsWith, endsWith

"Hello!".includes("!")
True

"Hello!".startsWidth("!")
False

"Hello!".endsWith("!")
True

These character checks are not as useful as finding the position of a character, because you cannot proceed with your algorithm if your purpose is to modify the string with the same search query. Besides there are more powerful methods for true/false checks which we will be described later. Up to this point we have learned to traverse a string left-to-right and right-to-left so what's the next step? Modification!

We can us several built-in methods or create our own for changing the text in a string. Let's start with the methods which don't require indicating a search query or index position. Since humans care more about uppercase and lowercase letters than computers, we can instantly transform an entire string use these two methods:

"Hello!".toUpperCase()
Result "HELLO!"

"Hello!".toLowerCase()
Result "hello!"

If you have seen a camel then you know they have humps and in programming when code LooksLikeThis it is called camel case. This is because it has humps and no spaces. You will have to traverse and recognize this type some day. We do this to make text easier to read for humans because who likes to read "a sEnTEnCe liKE ThiS!?" Actually, this method is also useful for web apps like blogs which take an article title and create a url known as a slug.

Example:
Article name "Mastering String Manipulation"
Slug url "domain.com/mastering-string-manipulation/"

Since there are multiple methods to get the same result, Let's begin with this example of combining strings into one. This is known as concatenation. You can use the "+" symbol or the concat method. Please note that since Javascript does not automatically enforce data types, so you should ensure that the data types are strings as opposed to arrays or booleans when using "+". This topic is for another entire article. With the lack of data type enforcement, erroneous output can occur as a result of type coercion. Meaning the + sign can accidentally change an integer to a string.

"Hello" + "World"
Result "HelloWorld"

"Hello".concat("World")
Result "HelloWorld"

"12" + 12
Result "1212", not 24.

The newest way to concatenate strings is using template strings which utilize the back-tick symbol and curly braces {} after the $ symbol. Yes, using those three symbols is required. You will see this in emails as well as websites to customize the writing output based on the user's information.

var myString = "Hello"
Var string2 = "World"
`${myString} ${World}`
Result "Hello World"

Previously I stated that empty spaces count towards the length of a string, in other words they occupy a space in a string and can be manipulated as well. Since we want to be efficient in saving data as well as making text easy to read, we want to prevent unnecessary blank space and this can be done with the trim method.

It removes empty spaces at the beginning and end of a string, but not in the middle. If you want to remove empty space in the middle of a string, you have to utilize a more powerful method know as a "regular expression" which will be described later.

`" Hello World. ".trim()`
Result "Hello World."

To do the opposite, there is a method for that. You can pad a string at the end or beginning with any character. Let's say your web app deals with sensitive information like credit cards or you have ID numbers which have to conform to a specific length. You can use the padStart and padEnd methods for this. For example, a credit card number is saved in the app but you only want to show the last four digits prefixed with the * symbol.

"4444".padStart(8, "*")
Result "********4444"

"1234".padStart(4, "0")
Result "00001234"

Besides concatenating strings, you can also repeat them with a multiplier. It's uncommon to repeat text so the method will be more useful for symbols such as periods. For example, when you need to truncate a string and indicate to the reader that the string continues, you can use ellipses like this... It could also be useful for songs where lyrics are repeated. Actually, it's rare to see this method in code.

"Hello-".repeat(3)
Result "Hello-Hello-Hello"

PIZZA SLICE

Let's expand our character searches!
Using the previous search methods we are only able to retrieve one character at a time from a string. What if we want to select a word or a section of a string using an index range. Well we can do that by slicing a pizza and eating the slice we want. Almost!

The string method is called slice so a pizza slice is a good metaphor. For this, you have to pass in the start and end positions of your search query. The start position can be a negative number which will traverse the string in reverse or from the end of it. You may think, wouldn't it be easier to just match a word inside a string?

Well yes, but in some cases, coders may not be able to predict what strings they will encountered or the string will be a pre-determined length.

"Hello World".slice(6)
Result "World"

"Hello World".slice(6, 8)
Result "Wo"

"Hello World".slice(-3)
Result "rld"

Up to this point you have learned to traverse strings from the left and from the right, get character positions, do boolean tests, transform character cases, concatenate strings, remove empty space, pad, repeat strings and extract sub-strings. How about we learn how to revise our strings with the replace method. Scenarios for this can be removing explicit words, swapping first name with last name, swapping "-" for empty space " ".

The difference with the replace method compared to the previous methods in this article is that replace accepts strings and regular expressions as search queries. It also accepts a function as a second parameter but we won't go into custom functions at this time. With replace, you don't need to rely on using index positions but you need to be familiar with regular expressions (regexp or regex for short) because it is how you can replace multiple instances of the search query. Note the usage of a regular expression with the forward slashes surround the search term.

"Very bad word".replace("bad", "good")
Result "Very good word"

"Very bad bad word".replace("bad", "good")
Result "Very good bad word"

"Very bad bad word".replace("bad", "good")

"Very bad bad word".replace(/bad/, "good")
Result "Very good bad word"

"Very bad bad word".replace(/bad/g, "good")
Result "Very good good word"

CRYPTIC PATTERNS

Are you beginning to feel the power of string manipulation? You are slowly becoming an expert. A regexp can be denoted using the forward slash / outside of the search word and the letter g after the second slash / indicates a global search which will replace multiple instances of the word inside the string. Generally, it's better to use indexOf() and replace() for faster function execution speed and when searching for one instance of a word.

Otherwise, to understand regular expressions you have to memorize the symbols on your keyboard. Many symbols including letter cases. In fact, there's nothing regular about "regular expressions". It should be called "cryptic patterns" because no human being can read them without finding the meaning of the symbols used. To simplify the meaning for human language consumption, you can also say they are string-searching algorithms.

MAGIC WAND

Before I show you some of the characters used, I would like to paint you a picture of the traversing that happens using regexp. First imagine a magic wand in your hand. Waving the magic wand releases magical stars onto the string which modify it to the desired string you want. Each star represents a symbol in the regular expression and that is what you have to come up with as a search pattern.

Regular expressions are truly powerful search techniques. You can find a needle in a haystack instantly, well more like in micro-seconds. Many input forms on the web use regular expressions to conform text into specific formats such as zip codes, phone numbers, domain names, currency values and the list can goes on. Do note that there are different regular expression engines depending on the programming language and the following is specific to javascript.

We can get more specific and describe those symbols and their purpose. To try out regular expressions yourself you can visit a website such as https://regexr.com/
Practice on this website by copying and pasting examples from this article or invent your own patterns.

/term/ regexp always has to be contained inside two forward slashes. "A/B/C" is not a regexp. Every character or symbol between the slashes represents something other than the symbol itself.

/abc/ any alphabetical character without symbols is equivalent to a regular consecutive search string.

/\$/ An explicit search for a symbol has to be prefixed with a backward slash \, in this case it's the dollar symbol. It's called escaping even though none of them will run away. The symbols still need to escape from the wrath of your cryptic search desires.

/^abc/ and /abc$/ These symbols don't have to be escaped. They are the carrot ^ and dollar sign $. Their purpose is to restrict the search to the beginning and ending of a string respectively. This is also known as anchoring so they can be called anchors. In this case, it means if "abc" is in the middle of "xyzabczyx", it will be ignored. ^ means the string must start with "abc" and $ means that the string must end with "abc". You can apply one or both.

What if you don't want to search for an alphabetical character nor a symbol, but a formatting change in the string. Since I mentioned an empty space has meaning in code, so does, a tab, a new line, and a carriage return. These can be searched using a combination of backslash and one letter. For brevity, we've excluded the surrounding slashes.

\n Find a newline
\t Find a tab
\r Find a carriage return

This is mind-blowing right? You can manipulate empty space and look for invisible metacharacters which control formatting using regexp. Let's try a regexp example based on what we know so far. We want a specific dollar amount in the beginning of a string $10.xx and any cent amount.

/^\$10\.\d\d/

We are using ^ to match the start
then a backslash \ to escape the dollar $ sign
the number 10 followed by an escaped period .
the escaped \d represents any digit 0-9 so we have it twice

As previously mentioned, adding a backslash to any letter changes the search pattern. Here are some search patters with the backlash and letter combination.

\w Matches any word
\d Matches any digit
\s Matches empty space

In addition to that you can match the negation or the opposite with the capital letter equivalents.

\W don't match a word
\D don't match a digit
\S don't match empty space

GLOBALLY INSENSITIVE

Now that you are getting more comfortable with the possibilities of regular expressions, you need to be aware of the letters "g" and "i" at the ending of the regexp term, right after the second forward slash. These are known as flags which modify your search. The "g" means global so it will return more than one result match if available while the "i" means insensitive in regards to text case. Uppercase or lowercase will not matter using this flag.

/term/g Finds multiple instances, not just the first
/term/i Finds uppercase and lowercase characters

To expand on your searches, here's the next addition of complexity. You may want to find a combination of letters, numbers or symbols. You can do this by grouping inside parentheses () and brackets []. The brackets are specific to character ranges such as 0-9 or A-Z uppercase, a-z lowercase. You can use multiple dashes for multiple ranges inside a single set of brackets.

Parentheses are not useful alone, but when you have additional search terms in one regexp. To throw in a monkey wrench, the carrot ^ symbol inside a bracket set will negate the search.

/[abc]/ Matches any of the letter a, b, or c.
/[0-7]/ Matches numbers 0-7 anywhere in the string.
/[^0-7]/ Don't match numbers 0-7 anywhere in the string.

[0-9] is identical to the \d for digits while \w is identical for [a-z] words.

Using parentheses () is useful when you want to search more than one pattern such as international phone numbers while brackets [] or for searching sets. When using parentheses in your search, you may also include the pipe symbol | as an OR operator. This means your result can be the search pattern on either side of the pipe. This is known as alternation. Here are examples:

/[abc](123)/ Matches a, b, or c, followed by 123
/gr[ae]y/ Matches gray or grey
/(gray|grey)/ Matches gray or grey

QUANTIFIERS

Do you want to match a specific amount of letters or numbers? Perhaps 0 or 1, 1 or many, only 4. It's all possible with quantifiers. Here's are quantifier symbols and how you can use them. We will use the letter "a" as part of the example.

/a*/ Matches 0 or more letter a
/a+/ Matches 1 or more letter a
/a?/ Matches 0 or 1 letter a
/a{4}/ Matches exactly 4 consecutive letters a.
/a{2,3}/ Matches between 2-3 letters a.

The possibilities don't stop here. This is why algorithms utilize regular expressions regularly so becoming an export in them is going to take you a long way. In total, there are 11 metacharacters available for regular expressions. They are: \ ^ $ . | ? * + () [] {} Each has a purpose.

Another practical example is to find html tags because they are the foundation of websites. Let's think this through before typing out the expression. 1. We need at least one letter because all tags start with a letter and while it should be lowercase, we may encounter legacy html that is capitalized.

Next, we shall expect more letters or a number such as h1 tags. While the * will get one or more characters, we can limit the amount using {} instead. The following will capture html tags without attributes:

/<[A-Za-z][A-Za-z0-9]*>/g Matches html tags

LOOK AROUND

Finally, there is another advanced concept if regular expressions weren't advanced enough. It is called the lookahead. There's a positive and negative lookahead. It must be placed inside parentheses and begin with a question mark ?. Essentially a lookahead matches the search pattern but does not capture it or you can think of it as to match something not followed by something else. This is useful when doing a combined search pattern by grouping. To demonstrate, let's search for a dollar value in a string that is followed by "USD" but we don't want to capture the "USD". We will use the positive lookahead using (?= and the negative lookahead using (?!

/\$30(?=USD)/ Matches $30 from "The product costs $30USD"
/\$30(?!USD)/ Matches $30 from "The USD value is $30"

SUMMARY

There we have it! A comprehensive usage of javascript for manipulating strings to your desires featuring built-in methods and powerful regular expressions. Now you may approach your coding algorithms easier using all these methods learned and create your own search patterns which can be greedy, fuzzy, lazy, dirty, empty, crazy, etc. This is just the beginning of your algorithm adventures and wielding a superpower called coding.

I hope you will familiarize yourself with all the methods available and try to memorize them through practice, practice, and more practice.