动态改变richtext颜色

Creator 3.x
#1

const str = “测试：我是一个123，伤害30%。有附加[燃烧]效果”

请教下，上述是一个富文本文字，想对里面的数字、百分比、[] 这类词用不同的颜色或者加个下划线表示，但是游戏里这类的非常多，在表里每个写 太费时间了。请教下大家有没有用代码改变。。

只用到了正则，具体怎么改变就不知道了。。。

#2

封装个接口，颜色相关的数字可以用%d,文字%s，然后从配置表读颜色，什么颜色，丢给策划也行。

#4

你可以写个公用的方法区修改你想要的文字如：

给文字描边
public static AddRichOutLine(Str,Obj: OUTLINE) {
if(Obj) {
if(this.isEmpty(Obj.color))
Obj.color=“000000”
if(null==Obj.width)
Obj.width=2
return <outline color=${Obj.color} width=${Obj.width}>${Str}</outline>
}
return Str
}

改变文字颜色
public static AddRichColor(Str,color) {
if(color) {
return <color=${color}>${Str}</color>
}
return Str
}

改变文字大小
public static AddRichFontSize(Str,nFontSize) {
if(nFontSize) {
return <size=${nFontSize}>${Str}</size>
}
return Str
}

#5 
const { ccclass, property } = cc._decorator;

@ccclass
export default class RichText extends cc.Component {

    // <color=#00ff00>Rich</c><color=#0fffff>Text</color>
    text: string = "测试：我是一个123，伤害23。50%有附加[燃烧]效果,30%有附加[冰冻2]效果";

    protected onLoad(): void {
        if (!this.node.getComponent(cc.RichText)) {
            this.node.addComponent(cc.RichText);
        }

    }

    start() {
        this.node.getComponent(cc.RichText).string = this.matchRichText(this.text.slice(0));

    }

    matchRichText(str: string) {
        let ret = '';
        let patt1 = /\[.*?\]/; // 中括号
        let patt2 = /\d+?\%/; // 百分数
        let patt3 = /\d+/; // 数字

        let patts = [patt1, patt2, patt3];
        let pres = ['<color=#ff0000>', '<color=#00ff00>', '<color=#0000ff>']; // 一个正则对应一个颜色，别和背景相同

        // 思路是遍历字符串，找到所有正则里最先符合的
        // 然后通过这个符合的结果把字符串分成三部分,前半部分，匹配到的结果，后半部分
        // 拼接结果，前半部分+标签前半段+匹配结果+标签结尾
        // 循环遍历完后半部分
        while (str.length > 0) {
            let ms = patts.map(v => {
                let sub = str.match(v); // 匹配正则
                let m = sub ?
                    {
                        sub: sub.toString(),
                        i: str.indexOf(sub.toString())
                    } :
                    {
                        sub: '',
                        i: str.length
                    }
                return m;
            });

            // 找到最靠前的匹配串
            let min = ms.reduce((a, b) => { return a.i <= b.i ? a : b }); // 即是数字又是百分数，返回百分数（百分号正则在数字正则的前面就行了）
            if (min.sub) {
                console.log(str.slice(0, min.i)); // 匹配子串之前的部分
                console.log(min.sub) // 匹配子串
                let pre = pres[ms.indexOf(min)]; // 第几个正则的结果用第几个标签的颜色
                ret += str.slice(0, min.i) + pre + min.sub + '</c>'; // 拼接结果,子串用标签包起来
                str = str.slice(min.i + min.sub.length); // 剩下部分，再次去循环
            } else {
                // 没匹配到内容,剩下的部分直接拼到结果上就结束了
                ret = ret + str.slice(0);
                str = str.slice(min.i); // min.i=str.length了 str就清空了
            }
            console.log(str + '\n ');
        }

        console.log('ret', ret);
        return ret;
    }

}
#6

太多的富文本还是很耗性能的