Tutorial 206: Styling Text

Joe Clay | Apr 6, 2020

In this tutorial, I'll show you how to use regular expressions—aka regex—to style text using the expression selector in text animators. This is particularly useful if you want to change a lot of things that can be broken down into patterns or if you have text you can't easily modify, like text coming from a CSV.

The basic idea is to look for a regex pattern, and then save a string with all of those matches replaced with a certain special character. After that, we do a simple check on that saved string and every spot we find that special character, we set our expression selector to 100.

This idea was sparked by Luis Martínez, who sent me a comment about his method. So make sure to go see how he did it! This tutorial uses his regex to remove the hidden control characters.

I also mentioned Zack Lovatt's ASH Syntax Highlighter in this tutorial, which I'd assume does what I did here as an experiment—but in a better and faster way. So check it out if you need that specific functionality.

I hope you enjoy this one. It has some specific, but really useful utility!

Expressions

Here are all of the example expressions used in the tutorial. These all go into the Amount property of an expression selector.

Yellow
var RE = /(yellow)/g;
    txt = text.sourceText.replace(RE, function($0) {
      return '~'.repeat($0.length);
    });
    if(txt.charAt(textIndex - 1) == '~') { 100; } else { 0; }
Control Characters
var charactersRE = /\r?\n|\r/g;
var controlRE = /[=\*/+-]/g;
txt = text.sourceText.replace(charactersRE,'');
txt = txt.replace(controlRE, '=');
if(txt.charAt(textIndex - 1) == '=') { 100; } else { 0; }
Functions
var charactersRE = /\r?\n|\r/g;
var digitsRE = /[.]{1}([a-z_]+?)[(]{1}/gi;
txt = text.sourceText.replace(charactersRE,'');
txt = txt.replace(digitsRE, function($0, $1) {
    return '_' + (new Array($1.length + 1).join('@')) + '_';
});
if(txt.charAt(textIndex - 1) == '@') { 100; } else { 0; }
Numbers
var charactersRE = /\r?\n|\r/g;
var digitsRE = /(-?)(\d+)/g;
txt = text.sourceText.replace(charactersRE,'');
txt = txt.replace(digitsRE, function($0, $1, $2) {
    return (new Array($1.length + 1).join('@')) + (new Array($2.length + 1).join('@'));
});
if(txt.charAt(textIndex - 1) == '@') { 100; } else { 0; }
Quotes
var charactersRE = /\r?\n|\r/g;
var quoteRE = /('|")(\w+)('|")/g;
txt = text.sourceText.replace(charactersRE,'');
txt = txt.replace(quoteRE, function($0, $1, $2, $3) {
    return '@' + (new Array($2.length + 1).join('@')) + '@';
});
if(txt.charAt(textIndex - 1) == '@') { 100; } else { 0; }

Become a Patron

If you'd like to help support Workbench, check out our Patreon page. Thank you for even considering clicking this link to support what we're doing. We appreciate it. Patrons get all sorts of benefits, from R&D files, setups, and elements to early product releases.

Check out our Patreon Today

Grab the Project Files

Get the project file through our Gumroad Store. This project file contains the After Effects file shown in the tutorial as well as all of the elements used to build it. It also includes a jsx file that contains a library of code that can be used to apply this effect. That was something experimental that we threw in to figure out how it works.

If you're buying project files, consider becoming a Patron. At the $5/mo. tier, you get access to project files as they come out and some tutorials also come with additional BTS content showing more of the builds.

Get the project on Gumroad