const str = “测试:我是一个123,伤害30%。有附加[燃烧]效果”
请教下,上述是一个富文本文字,想对里面的数字、百分比、[] 这类词用不同的颜色或者加个下划线表示,但是游戏里这类的非常多,在表里每个写 太费时间了。请教下大家有没有用代码改变。。
只用到了正则,具体怎么改变就不知道了。。。
const str = “测试:我是一个123,伤害30%。有附加[燃烧]效果”
请教下,上述是一个富文本文字,想对里面的数字、百分比、[] 这类词用不同的颜色或者加个下划线表示,但是游戏里这类的非常多,在表里每个写 太费时间了。请教下大家有没有用代码改变。。
只用到了正则,具体怎么改变就不知道了。。。
封装个接口,颜色相关的数字可以用%d,文字%s,然后从配置表读颜色,什么颜色,丢给策划也行。
你可以写个公用的方法区修改你想要的文字如:
给文字描边
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
}
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;
}
}
太多的富文本还是很耗性能的