實現含富文本的打字機效果

public richText(textLabel:mo.EUI.Label,str: string = "") {
            const regex = /\[.+?\/?\]/g; // 匹配中括號標籤
            const matchArr = str.match(regex);
            const specialChar = "│";
            const replaceStr = str.replace(regex, specialChar); // 標籤數組
            const textArr: string[] = replaceStr.split(specialChar); // 文字數組
            const strArr: string[] = []; // 存放處理過的文字數組
            let paraNum = 0; // 待替換參數個數
            for (let text of textArr) {
                // 非空字符替換成類似 $[0-n] 參數
                if (text !== "") {
                    text = `$[${paraNum}]`;
                    paraNum += 1;
                }
                strArr.push(text);
            }
            let templetStr: string = strArr.join(specialChar); // 數組轉成待替換字符串
            for (let index = 0; index < textArr.length; index++) {
                // 轉換代替換字符串之後, 刪除文字數組多餘空字符
                if (textArr[index] === "") {
                    textArr.splice(index, 1);
                    index = index - 1;
                }
            }
            while (templetStr.search(specialChar) !== -1) {
                // 數組轉成的字符串原本 '特殊字符' 位置都是富文本標籤的位置, 替換回標籤
                if (matchArr[0]) {
                    templetStr = templetStr.replace(specialChar, matchArr[0].toString());
                    matchArr.splice(0, 1);
                } else {
                    templetStr = templetStr.replace(specialChar,             "");// 空字符串替換,防止死循環
                    console.warn("matchArr not enough");
                }
            }
            console.log("xxxxxx:", templetStr)
            const lastStrArr: string[] = []; // 轉換後富文本數組
            ///////////////////////////////////////////////
            const arrayParm:string[] = [];
            for (let i = 0; i < paraNum; i++) {
                arrayParm.push("");
            }//同const arrayParm: string[] = new Array(paraNum).fill("");
            ////////////////////////////////////////////////////
            for (let i = 0; i < textArr.length; i++) {
                for (const text of textArr[i]) {
                    arrayParm[i] = arrayParm[i] + text;
                    let replaceStr1 = templetStr;
                    for (let index = 0; index < paraNum; index++) {
                        replaceStr1 = replaceStr1.replace(`$[${index}]`, arrayParm[index]);
                    }
                    lastStrArr.push(replaceStr1);
                }
            }
            console.log("bbbbb:"+lastStrArr);
            let lastStrIndex = 0;
            const func = () => {
                if (lastStrIndex >= lastStrArr.length) {
                    return;
                }
                textLabel.text = lastStrArr[lastStrIndex];
                lastStrIndex += 1;
                setTimeout(() => {
                    func();
                }, 100);
            };
            setTimeout(() => {
                func();
            }, 100);
        }

實現打字機效果。支持[ubb color=0xff0000][/ubb]格式
如果要配置
<color=0xff0000></color>
const regex = /\[.+?\/?\]/g;
替換爲const regex = /<.+?\/?>/g;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章