How to change the color of a Text?

Ask the community
,
11

This is my code. Works for my purpose, until Wix decides to change something and break it. Took me some time, don’t even remeber exactly what it does (I do remember it removes all color before applying a new one)

export function ChangeTextColor(textToChange, newColor)
{
	newColor = newColor.replace(/\s/g, '' );

	const sanitizePattern = /(font-size:[0-9 ]*[., ]*[0-9 ]*px\s*;\s*color:\s*rgba\(\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,(1\s*\)|0\s*\)|\s*0[.][0-9]{1,3}\s*\)|1[.][0]{1,3}\s*\)))|(font-size:[0-9 ]*[., ]*[0-9 ]*px\s*;\s*color:\s*#[a-fA-F0-9]{6})/gi;
	const sanitizeRemoveWixColorClass = /color_[0-9a-zA-Z]*\s*/gi
	const fontPattern = /font-size:[0-9 ]*[., ]*[0-9 ]*px/gi;
	const colorPattern = /color:\s*#[a-fA-F0-9]{6}/gi;
	const colorPatternRgba = /color:\s*rgba\(\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,(1\s*\)|0\s*\)|\s*0[.][0-9]{1,3}\s*\)|1[.][0]{1,3}\s*\))/gi;
	let tempText = textToChange.html;

	//sanitize remove wix color class
	let matchExp = Array.from(tempText.matchAll(sanitizeRemoveWixColorClass), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, ""));

	//sanitize
	matchExp = Array.from(tempText.matchAll(sanitizePattern), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, match.match(fontPattern)));

	//color:rgba(1,1,1,1)
	matchExp = Array.from(tempText.matchAll(colorPatternRgba), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, "color:" + newColor));

	//color:#AAAAAA
	matchExp = Array.from(tempText.matchAll(colorPattern), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, "color:" + newColor));

	//font-size:1px
	matchExp = Array.from(tempText.matchAll(fontPattern), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, match + "; color:" + newColor));

	textToChange.html = tempText;
}