Tutorial: bold part of a text layer using expressions

[ShiveringCactus]

About a year ago, I shared a method for After Effects to allow you to add bold to part of a text layer using Text Animators. Trouble was, it was faking bold using rather than an actual bold font. But with After Effects 2025 and the new Per Character styling via expressions, you can now do it for real.

I break down how to use the new expression, then I add some slider controls to make it easier to adjust. And finally, I share my latest work in progress which allows to you select words instead of characters.

[Airweb_AE]

To avoid issues with occurrences,

I wouldn't have used indexOf()

wordStart = Math.max(0, Math.floor(effect("Word Start")(1)) -1);
numWords = Math.max(1, Math.floor(effect("Num Words")(1)));
words = split(/\s+/);
selectedWords = words.slice(wordStart, wordStart + numWords).join(" ");
regex = new RegExp(`(?:\\s*\\S+\\s*){${wordStart}}`);
m = regex.exec(value);
firstCharIndex = m ? m[0].length : 0;
selectedLength = selectedWords.length + 1;
style
    .setFauxBold(true,firstCharIndex,selectedLength)
    .setFillColor([1,0,0],firstCharIndex,selectedLength);

 

[ShiveringCactus]

Are you kidding me?   2 hours is all it took to come up with a better option???

Nice one.

I'm a little confused by what this part is doing:

regex = new RegExp(`(?:\\s*\\S+\\s*){${wordStart}}`);
m = regex.exec(value);
firstCharIndex = m ? m[0].length : 0;

I know RegExp + exec looks for a pattern and will find all of the options, but how does the third line then determine which one to show?

I'll happily post a follow up video crediting you and singing your praises @Airweb_AE , but I'd like to understand it myself.

[Airweb_AE]

The regex is used to count the number of characters before the selected word (based on wordStart value), which gives us the start of the character range (firstCharIndex).

[Milthon257975131ms1]

You're making an excellent contribution.

Currently, I'm looking to create an expression that allows me to put one or more words in bold. I’ve already found a simple way to do it with continuous words, but I haven't yet found a solution to bold words that are interspersed.

Example: You should maintain a good balance between your work time and your family time; this will allow you to have a more balanced lifestyle.

[Airweb_AE]

Maybe just need to place the words you want to bold within brackets:

You should maintain a good balance between
your [work time] and your [family time];
this will allow you to have a [more balanced lifestyle].

And to use this expression:

var regex = /\[(.*?)\]/g;
var result;
var boldColor = [1, 0, 0];
var newValue = value.replace(regex, '$1');
var newStyle = style;
var ofs = 0;

while ((result = regex.exec(value)) !== null) {
    var matchStart = result.index;
    var matchText = result[1];
    var startIndex = matchStart - ofs;
    var selectedLength = matchText.length;
    
    newStyle = newStyle
        .setText(newValue)
        .setFauxBold(true, startIndex, selectedLength)
        .setFillColor(boldColor, startIndex, selectedLength);
    ofs += 2;
}

newStyle;

[Milthon257975131ms1]

Excellent, my friend! You're a true master! It worked perfectly for me. I’m infinitely grateful for this amazing help. I’d love to follow you on social media or YouTube if you have content on these After Effects topics.

[Airweb_AE]

Same thing, using lines as separators:

lineStart = Math.max(0, Math.floor(effect("Line Start")(1)) - 1);
numLines = Math.max(1, Math.floor(effect("Num Lines")(1)));

lines = value.split(/\r/);
selectedLines = lines.slice(lineStart, lineStart + numLines).join("\r");

regex = new RegExp(`(?:.*\r){${lineStart}}`);
m = regex.exec(value);
firstCharIndex = m ? m[0].length : 0;
selectedLength = selectedLines.length;

style
    .setFauxBold(true, firstCharIndex, selectedLength)
    .setFillColor([1, 0, 0], firstCharIndex, selectedLength);

[ShiveringCactus]

@Airweb_AE  thank you.  I've now updated my video to include your expression with several shout outs to you.

[Airweb_AE]

Even though I didn't understand everything you said in the video,

I have a feeling it's positive, so thank you! 😂

[ShiveringCactus]

All very positive.  I pretended to be frustrated, but then I heaped praise on you.  

[damien_2938]

Exciting subject, thanks guys!
What approach would you use to detect faux bold text, to instantly color it?

[ShiveringCactus]

You can chain expression setStyles together, so you can have setFont("FONT",20,30).setFillColor([1,0,0],20,30)

setFillColor uses RGB values (0-1) in an array, so [1,0,0] is pure red (100% red, 0% green, 0% blue).

Your question is throwing me slightly as you're asking about Faux Bold, for that I'd use Text Animators which is a separate way to achieve a very similar result that largely avoids expressions.  I made a much earlier video about that:

https://youtu.be/TuTcekuTbeY?si=Ge-L--KyhvPWaUrQ

[damien_2938]

Thanks.
My question was :
imagine you have a texfield, that you fill with a text, then on certains words you apply faux bold via the interface.

Is there a way to detect within this text the words that are in faux bold and then color them ?

[ShiveringCactus]

Oh right.  You did mean detect.  Not that I am aware of.

What's the scenario / problem you're trying to solve?  There might be another approach.

[damien_2938]

Thanks for your answer.

The scenario :

I have an AE template, where I have several text fields displayed in blocks in different comps.
In those blocks of text, I have to highlight some keywords.
The process today is to copy and paste all the text, select the words to highlight, change there font and color via AE interface.

I'm looking for a clever and faster way to do that.

I'm using essentials graphics to manage colors and other stuffs...

[ShiveringCactus]

I can't think of a simple way, other than adding in special characters to find then replace, but it always ends up feeling "fragile" - like the code might run slow or miss some.