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; }