[익스프레션] 포인트 텍스트에만 강조 박스 만들기

//RenderText_Left 레이어의 소스텍스트 익스프레션

totalText = thisComp.layer("Text").text.sourceText;
pointText = thisComp.layer("PointText").text.sourceText;

// '||' 기호는 '또는'을 뜻합니다. (엔터키 바로 위에 있습니다.)
// 정규표현식에서 /\s+$/는 텍스트 뒤에 들어간 공백을 가리킵니다. 따라서 여기서는 만약 출력하려는 텍스트 끝에 공백이 있으면 그 공백을 제거하고 출력합니다.
//renderText 는 포인트 텍스트가 입력되지 않았거나(pointText.length === 0) 포인트 텍스트가 토탈 텍스트에서 찾을 수 없는 경우(totalText.indexOf(pointText) === -1)에는 토탈텍스트를 출력하고, 그 외의 경우에는 토탈텍스트를 포인트 텍스트 기준으로 나눈 배열(totalText.split(pointText))의 첫 번째 원소 텍스트([0])를 출력합니다.
renderText = (pointText.length === 0 || totalText.indexOf(pointText) === -1) ? [totalText] : totalText.split(pointText)[0].replace(/\s+$/, "");

//여기에서 출력하는 텍스트의 기본 스타일은 토탈텍스트 레이어의 디자인을 그대로 가져오도록 합니다. : totalText.style
//이러면 작업을 할 때, Text레이어의 디자인을 바꿔보면서 실시간으로 디자인 작업을 할 수 있습니다
totalText.style.setText(renderText);

//RenderText_Center 레이어의 소스텍스트 익스프레션

totalText = thisComp.layer("Text").text.sourceText;
pointText = thisComp.layer("PointText").text.sourceText;

//여기에서 출력할 렌더 텍스트는 포인트 텍스트가 없거나 오타가 있을 경우에는 그냥 빈 텍트스 레이어([""])를 출력하고 그 외에는 포인트 텍스트를 뒷 공백을 없애고 출력합니다.
renderText = (pointText.length === 0 || totalText.indexOf(pointText) === -1) ? [""] : pointText.replace(/\s+$/, "");

//이 레이어의 스타일은 포인트 텍스트 레이어의 스타일을 가져옵니다. : pointText.style
pointText.style.setText(renderText);

//RenderText_Right 레이어의 소스텍스트 익스프레션

totalText = thisComp.layer("Text").text.sourceText;
pointText = thisComp.layer("PointText").text.sourceText;

renderText = (pointText.length === 0 || totalText.indexOf(pointText) === -1) ? [""] : totalText.split(pointText)[1];

//이 레이어의 스타일은 Text 레이어의 스타일을 가져옵니다. : totalText.style
//Left 텍스트와 Right 텍스트의 디자인은 똑같이 적용합니다.
totalText.style.setText(renderText);

//렌더 텍스트 레이어의 앵커포인트를 모두 다음과 같이 세팅합니다.

a = thisLayer.sourceRectAtTime();

x = a.left + a.width/2;
//a.height/2가 아닙니다.
y = a.top + a.height;

[x, y]

//RenderText_Center 레이어의 포지션 익스프레션

totalText = thisComp.layer("Text").text.sourceText;

leftTextLayer = thisComp.layer("RenderText_Left");
leftText = leftTextLayer.text.sourceText;

//만약 포인트 텍스트를 기준으로 앞 뒤에 공백이 있을 경우 이 슬라이더 값으로 여백을 조절하기 위해 슬라이더 콘트롤을 추가했습니다.
text_blank = thisComp.layer("RenderText_Control").effect("Text_blank")("Slider");
//만약 포인트 텍스트를 기준으로 앞 뒤에 공백이 없을 경우 박스를 넣었을 때 앞 또는 뒷 텍스트와 박스가 겹쳐져서 디자인이 안좋아질 수 있습니다. 이런 경우 이 슬라이더 값으로 여백을 조절하기 위해 슬라이더 콘트롤을 추가했습니다.
default_Text_blank = thisComp.layer("RenderText_Control").effect("Default_Text_blank")("Slider");

default_X_Position = leftTextLayer.transform.position[0] + leftTextLayer.sourceRectAtTime().width/2 + thisLayer.sourceRectAtTime().width/2;

//.replace(/^\s+/, "")는 텍스트의 앞에 있는 공백을 제거합니다. 예를 들어 포인트 텍스트를 " 애프터"라고 적었다면 "애프터"로 바꿔주는 역할을 합니다.
x = leftText.length !== totalText.indexOf(thisLayer.text.sourceText) || thisLayer.text.sourceText.length !== thisLayer.text.sourceText.replace(/^\s+/, "").length ? default_X_Position + text_blank : default_X_Position + default_Text_blank;

//y값은 Left 렌더 텍스트의 y값을 그대로 가져옵니다.
y = leftTextLayer.transform.position[1];

[x, y]

//RenderText_Right 레이어의 포지션 익스프레션

totalText = thisComp.layer("Text").text.sourceText;

//현재 레이어의 왼쪽 텍스트가 RenderText_Center 레이어로 바뀝니다.
leftTextLayer = thisComp.layer("RenderText_Center");
leftText = leftTextLayer.text.sourceText;

text_blank = thisComp.layer("RenderText_Control").effect("Text_blank")("Slider");
default_Text_blank = thisComp.layer("RenderText_Control").effect("Default_Text_blank")("Slider");

default_X_Position = leftTextLayer.transform.position[0] + leftTextLayer.sourceRectAtTime().width/2 + thisLayer.sourceRectAtTime().width/2;

// totalText.indexOf(thisLayer.text.sourceText) - totalText.indexOf(leftText) : 현재 레이어의 인덱스 값에서 포인트 텍스트 레이어의 인덱스 값을 뺐습니다. 이러면 포인트 텍스트 레이어의 뒤에 여백이 있는지 체크할 수 있습니다.
x = leftText.length !== totalText.indexOf(thisLayer.text.sourceText) - totalText.indexOf(leftText) || thisLayer.text.sourceText.length !== thisLayer.text.sourceText.replace(/^\s+/, "").length ? default_X_Position + text_blank : default_X_Position + default_Text_blank;

y = thisComp.layer("RenderText_Left").transform.position[1];

[x, y]

const layerName = thisLayer.name;

const renderTextLayer = thisComp.layer("RenderText_Center");

const wb = thisComp.layer(layerName+"_Control").effect("Width_Blank")("Slider");
const hb = thisComp.layer(layerName+"_Control").effect("Heigth_Blank")("Slider");

const boxWidth = renderTextLayer.sourceRectAtTime().width + wb;
const boxHeight = renderTextLayer.sourceRectAtTime().height + hb;
[boxWidth, 20]

//포인트 텍스트의 컬러값을 R, G, B로 채널을 분리해서 x, y, z에 넣고 A값을 1로 출력했습니다.
x = thisComp.layer("PointText").text.sourceText.style.fillColor[0];
y = thisComp.layer("PointText").text.sourceText.style.fillColor[1];
z = thisComp.layer("PointText").text.sourceText.style.fillColor[2];
[x, y, z, 1]

//다른 방법으로 다음과 같이 작성했습니다.
//thisComp.layer("PointText").text.sourceText.style.fillColor 값이 원소가 3개인 배열이므로 배열 뒤에 1을 원소로 추가한 배열을 만들었습니다.
//a=[1,2,3]일때 a.concat(4)는 [1,2,3,4]를 출력해줍니다.
thisComp.layer("PointText").text.sourceText.style.fillColor.concat(1);

a = thisLayer.sourceRectAtTime();

x = a.left + a.width/2;
y = a.top + a.height;

[x, y]

thisComp.layer("RenderText_Center").transform.position;

//Rectangle 오브젝트의 앵커 포인트
//박스 사이즈의 절반 만큼 -x로 이동 : 앵커의 위치를 박스의 좌측으로 정
x = content("Rectangle 1").content("Rectangle Path 1").size[0]/2;
[-x, 0]