showText.zip

showText.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="./showText.css">
  7. </head>
  8. <body>
  9. <script src="./marked.min.js"></script>
  10. <script src="./showText.js" type="module"></script>
  11. <script type="module">
  12.     import ShowText from "./showText.js";
  14.     // let input = "【文本-取文本左-->>文本1我是要反转的文本-->>反】"
  15.     // let input = "【文本-取文本右-->>【文本-反转文本-->>文本1我是要反转的文本】-->>5】"
  16.     // let input = "【文本-取中间-->>文本1我是要反转2的文本-->>1-->>1】"
  17.     // let input = "【文本-反转文本-->>【文本-反转文本-->>4324【返回-->>返回】【当前时间】】】我是后缀"
  18.     // let input = "【随机数-->>【随机数-->>af2f-->>a5g】-->>【随机数-->>5b-->>7】】"
  19.     // let input = "【变量-->>a-->>3>2】【判断-->>【变量-->>a】-->>是-->>否】";
  20.     // let input = "【文本-替换-->>我是文本a字符-->>a-->>b】"
  21.     // let input = "【权重随机数-->>a,b,c,d-->>4,2,2,1】"
  22.     // let input = "【文本-反转文本-->>【当前时间】【文本-注音-->>汉字-->>hanzi】aaa】【当前时间】"
  23.     // let input = `a【空格】【变量-->>日期-->>【当前时间-->>年-月-日】】
  24.     //         【变量-->>时间-->>【当前时间-->>时:分:秒】】
  25.     //         【文本-文字颜色-->>【变量-->>时间】-->>aqua】【换行】
  26.     //         【变量-->>日期】`
  27.     // let input = "【文本-注音-->>fdsf【文本-反转文本-->>汉字】fdsfsd-->>【文本-反转文本-->>hanzi】】"
  28.     // let input = " 【文本-文字颜色-->>【文本-注音-->>fdsf【文本-反转文本-->>汉字】fdsfsd-->>【文本-反转文本-->>hanzi】】-->>aqua】 __完了__"
  29.     // let input = `【文本-文字颜色-->>【文本-黑幕-->>黑幕】-->>aqua】`
  30.     let input = `【文本-黑幕-->>【文本-文字颜色-->>黑幕-->>aqua】】`
  32.     const Show = new ShowText();
  33.     // const output = Show.showTextBrowser(input);
  34.     const output = Show.showTextWithMarked(input);
  35.     document.body.insertAdjacentHTML("beforeend", output);
  36. </script>
  37. </body>
  38. </html>

showText.js

  1. import BrowserReplaceText from "./BrowserReplaceText.js";
  2. const ReplaceText = new BrowserReplaceText();
  4. class ShowText {
  5.     errorOutput;
  6.     #backText;
  8.     constructor() {
  9.         this.doTextList = Object.assign({
  10.             "文本-反转文本"(text) {
  11.                 const type = text.match(/-->>([\s\S]*)】/);
  12.                 return ReplaceText.getReverseText(this.doReplaceToText(type[1]));
  13.             },
  14.             "文本-取文本左"(text) {
  15.                 const textState = this.doTextMatchList(text);
  16.                 return ReplaceText.getTextLeft(this.doReplaceToText(textState[0]), this.doReplaceToText(textState[1]));
  17.             },
  18.             "文本-取文本右"(text) {
  19.                 const textState = this.doTextMatchList(text);
  20.                 return ReplaceText.getTextRight(this.doReplaceToText(textState[0]), this.doReplaceToText(textState[1]));
  21.             },
  22.             "文本-取中间"(text) {
  23.                 const textState = this.doTextMatchList(text);
  24.                 return ReplaceText.getTextCenter(this.doReplaceToText(textState[0]), this.doReplaceToText(textState[1]), this.doReplaceToText(textState[2]));
  25.             },
  26.             "文本-替换"(text) {
  27.                 const textState = this.doTextMatchList(text);
  28.                 return this.doReplaceToText(textState[0]).replace(this.doReplaceToText(textState[1]), this.doReplaceToText(textState[2]));
  29.             },
  30.             "文本-取出数字"(text) {
  31.                 const textState = this.doTextMatchList(text);
  32.                 return ReplaceText.getTextNum(this.doReplaceToText(textState[0]));
  33.             },
  34.             "当前时间"(text) {
  35.                 const type = text.match(/-->>([\s\S]*)】/);
  36.                 return ReplaceText.getDate(+new Date(), type && this.doReplaceToText(type[1]));
  37.             },
  38.             "返回"(text) {
  39.                 const type = text.match(/-->>([\s\S]*)】/);
  40.                 this.#backText = this.doReplaceToText(type[1]);
  41.                 return ''
  42.             },
  43.             "选择"(text) {
  44.                 const choiceList = this.doTextMatchList(text);
  45.                 return this.doReplaceToText(choiceList[ReplaceText.getTextNum(this.doReplaceToText(choiceList[0]))]);
  46.             },
  47.             "判断"(text) {
  48.                 const choiceList = this.doTextMatchList(text);
  49.                 return Function("return " + this.doReplaceToText(choiceList[0]))() ? this.doReplaceToText(choiceList[1]) : this.doReplaceToText(choiceList[2]);
  50.             },
  51.             "随机数"(text) {
  52.                 const minMax = this.doTextMatchList(text);
  53.                 return ReplaceText.getRandom(this.doReplaceToText(minMax[0]), this.doReplaceToText(minMax[1]));
  54.             },
  55.             "权重随机数"(text) {
  56.                 const type = this.doTextMatchList(text);
  57.                 return ReplaceText.getWeightedRandom(this.doReplaceToText(type[0]).split(/[,，]/), this.doReplaceToText(type[1]).split(/[,，]/));
  58.             },
  59.             "变量"(text) {
  60.                 const type = this.doTextMatchList(text);
  61.                 return type.length === 1 ? ReplaceText.getVariable(this.doReplaceToText(type[0])) : ReplaceText.setVariable(this.doReplaceToText(type[0]), this.doReplaceToText(type[1]));
  62.             }
  63.         }, {
  64.             "文本-注音"(text) {
  65.                 const textState = this.doTextMatchList(text);
  66.                 return `{{{注音-${this.doReplaceToText(textState[0])}-${this.doReplaceToText(textState[1])}}}}`;
  67.             },
  68.             "文本-文字颜色"(text) {
  69.                 const textState = this.doTextMatchList(text);
  70.                 return `{{{文字颜色-${this.doReplaceToText(textState[0])}-${this.doReplaceToText(textState[1])}}}}`;
  71.             },
  72.             "文本-黑幕"(text) {
  73.                 const textState = this.doTextMatchList(text);
  74.                 return `{{{黑幕-${this.doReplaceToText(textState[0])}}}}`;
  75.             },
  76.             "换行"() {
  77.                 return "{{{换行}}}"
  78.             },
  79.             "空格"() {
  80.                 return "{{{空格}}}"
  81.             },
  82.         });
  83.         this.doHTMLList = {
  84.             "注音"(text) {
  85.                 const type = this.doHTMLMatchList(text);
  86.                 return ReplaceText.getRubyHTML(this.doReplaceToHTML(type[0]), type[1]);
  87.             },
  88.             "文字颜色"(text) {
  89.                 const type = this.doHTMLMatchList(text);
  90.                 return ReplaceText.setTextColor(this.doReplaceToHTML(type[0]), type[1]);
  91.             },
  92.             "黑幕"(text) {
  93.                 const type = this.doHTMLMatchList(text);
  94.                 return ReplaceText.getHeimuHTML(this.doReplaceToHTML(type[0]));
  95.             },
  96.             "换行"() {
  97.                 return "<br />"
  98.             },
  99.             "空格"() {
  100.                 return "&nbsp;"
  101.             },
  102.         };
  103.     }
  104.     showTextBrowser(text) {
  105.         let resText = text;
  107.         if (/【[\s\S]*】/.test(text)) {
  108.             text = text.replace(/\s+(?=【)/g, "").replace(/(?<=】)\s+/g, "");
  109.             resText = this.doReplaceToText(text);
  110.             resText = this.doReplaceToHTML(resText)
  111.         }
  112.         return this.errorOutput || resText;
  113.     }
  114.     showTextWithMarked(text) {
  115.         return marked.parse(this.showTextBrowser(text));
  116.     }
  118.     doReplaceToText(text) {
  119.         if (/【[\s\S]*】/.test(text)) {
  120.             let parts = text.match(/[【】]|[^【】]+/g),
  121.                 matches = [],
  122.                 balance = 0, index = 0;
  124.             for (let i = 0; i < parts.length; i++) {
  125.                 if (parts[i] === "【") {
  126.                     if (balance === 0) {
  127.                         index = i;
  128.                     }
  129.                     balance++;
  130.                 } else if (parts[i] === "】") {
  131.                     if (balance === 1) {
  132.                         matches.push(parts.slice(index, i + 1).join(""));
  133.                     }
  134.                     balance--;
  135.                     if (balance < 0) {
  136.                         this.errorOutput = 'missing "【"';
  137.                         return text;
  138.                     }
  139.                 }
  140.             }
  141.             if (balance > 0) {
  142.                 this.errorOutput = 'missing "】"';
  143.                 return text;
  144.             }
  146.             matches?.forEach(matchText => {
  147.                 text = text.replace(matchText, match => this.doTextMatch(match));
  148.                 if (this.#backText) {
  149.                     text = this.#backText;
  150.                     this.#backText = '';
  151.                 }
  152.             });
  153.         }
  154.         return text;
  155.     }
  156.     doReplaceToHTML(text) {
  157.         if (/{{{[\s\S]*}}}/.test(text)) {
  158.             let parts = text.match(/[\{\}]{3}|[^\{\}]+/g),
  159.                 matches = [],
  160.                 balance = 0, index = 0;
  162.             for (let i = 0; i < parts.length; i++) {
  163.                 if (parts[i] === "{{{") {
  164.                     if (balance === 0) {
  165.                         index = i;
  166.                     }
  167.                     balance++;
  168.                 } else if (parts[i] === "}}}") {
  169.                     if (balance === 1) {
  170.                         matches.push(parts.slice(index, i + 1).join(""));
  171.                     }
  172.                     balance--;
  173.                 }
  174.             }
  176.             matches?.forEach(matchText => text = text.replace(matchText, match => this.doHTMLMatch(match)) );
  177.         }
  178.         return text;
  179.     }
  180.     doTextMatch(match) {
  181.         const type = match.match(/【([\s\S]*?)(?:-->>|】)/);
  182.         if (type && this.doTextList[type[1]]) {
  183.             return this.doTextList[type[1]].call(this, type.input);
  184.         } else {
  185.             return type.input;
  186.         }
  187.     }
  188.     doHTMLMatch(match) {
  189.         const type = match.match(/{{{([\s\S]*?)[-|(?:}}})]/);
  190.         if (type && this.doHTMLList[type[1]]) {
  191.             return this.doHTMLList[type[1]].call(this, type.input);
  192.         } else {
  193.             return type.input;
  194.         }
  195.     }
  197.     #getMatchList(type, divide, left, right) {
  198.         let list = [], balance = 0, cacheList = [];
  199.         type.forEach(item => {
  200.             if (item.match(new RegExp(left + "|" + right))) {
  201.                 balance += (item.match(new RegExp(left, "g")) || []).length;
  202.                 balance -= (item.match(new RegExp(right, "g")) || []).length;
  203.                 cacheList.push(item);
  204.                 if (balance === 0) {
  205.                     list.push(cacheList.join(divide));
  206.                     cacheList = [];
  207.                 }
  208.             } else if (balance) {
  209.                 cacheList.push(item);
  210.             } else {
  211.                 list.push(item);
  212.             }
  213.         });
  214.         return list;
  215.     }
  216.     doTextMatchList(text) {
  217.         const type = text.match(/(?<=-->>)[\s\S]*?(?=-->>|】$)/g);
  218.         if (!type) { return [text] }
  220.         return this.#getMatchList(type, "-->>", "【", "】");
  221.     }
  222.     doHTMLMatchList(text) {
  223.         const type = text.match(/(?<=-)[\s\S]*?(?=-|(?:}}})$)/g);
  224.         if (!type) { return [text] }
  226.         return this.#getMatchList(type, "-", "{{{", "}}}");
  227.     }
  228. }
  230. export default ShowText;

BrowserReplaceText.js

  1. import ReplaceText from "./ReplaceText.js";
  3. class BrowserReplaceText extends ReplaceText {
  4.     constructor() {
  5.         super();
  6.     }
  7.     getReverseText(text) {
  8.         let resText = '';
  9.         text.split(/({{{[\s\S]*?}}})/).forEach(text => resText += /{{{[\s\S]*}}}/.test(text) ? text : text.split("").reverse().join(""));
  10.         return resText;
  11.     }
  12.     getRubyHTML(text, rt) {
  13.         return `<ruby>${text}<rp>(</rp><rt>${rt}</rt><rp>)</rp></ruby>`;
  14.     }
  15.     setTextColor(text, color) {
  16.         if (/^<[\s\S]+>$/.test(text)) {
  17.             return text.replace(/^<([\s\S]+?)>/, `<$1 style="color: ${color}">`);
  18.         } else {
  19.             return `<span style="color: ${color}" >${text}</span>`;
  20.         }
  21.     }
  22.     getHeimuHTML(text) {
  23.         if (/^<[\s\S]+>$/.test(text)) {
  24.             return text.includes("class=") ?
  25.                 text.replace(/class="([\s\S]+?)"/, "class='$1 heimu'") :
  26.                 text.replace(/^<([\s\S]+?)>/, "<$1 class='heimu'>");
  27.         } else {
  28.             return `<span class="heimu">${text}</span>`;
  29.         }
  30.     }
  31. }
  33. export default BrowserReplaceText;

ReplaceText.js

  1. class ReplaceText {
  2.     #variableMap;
  4.     constructor() {
  5.         this.#variableMap = {};
  6.     }
  7.     getReverseText(text) {
  8.         let resText = "";
  10.         for (let i = text.length - 1; i >= 0; i--) {
  11.             resText += text[i];
  12.         }
  13.         return resText;
  14.     }
  15.     getTextLeft(text, stamp) {
  16.         return text.split(stamp)[0];
  17.     }
  18.     getTextRight(text, stamp) {
  19.         return text.substring(text.indexOf(stamp) + 1);
  20.     }
  21.     getTextCenter(text, leftStamp, rightStamp) {
  22.         let matchType = text.match(new RegExp(`${leftStamp}([\\s\\S]*?)${rightStamp}`));
  24.         if (matchType) {
  25.             return matchType[1];
  26.         } else {
  27.             matchType = text.match(new RegExp(`${rightStamp}([\\s\\S]*?)${leftStamp}`));
  28.             return matchType ? matchType[1] : text;
  29.         }
  30.     }
  31.     getTextNum(text) {
  32.         if (typeof text === "number") {
  33.             return text;
  34.         }
  35.         return text.replace(/\D/g, '');
  36.     }
  37.     getRandom(min, max) {
  38.         return Math.floor(Math.random() * (parseInt(this.getTextNum(max)) - (min = parseInt(this.getTextNum(min))) + 1) + min);
  39.     }
  40.     getWeightedRandom(randomList, weightedList) {
  41.         let sum = 0;
  43.         weightedList = weightedList.map(v => parseInt(this.getTextNum(v)));
  44.         const r = this.getRandom(1, weightedList.reduce((a,b) => a + b));
  45.         for (let i = 0; i < randomList.length; i++) {
  46.             sum += weightedList[i];
  47.             if (r <= sum) {
  48.                 return randomList[i];
  49.             }
  50.         }
  51.     }
  52.     getDate(newDate = Date.now(), type) {
  53.         const date = new Date(newDate),
  54.             year = date.getFullYear(),
  55.             month = date.getMonth() + 1 + "",
  56.             day = date.getDate().toString().padStart(2, '0'),
  57.             hour = date.getHours().toString().padStart(2, '0'),
  58.             minutes = date.getMinutes().toString().padStart(2, '0'),
  59.             seconds = date.getSeconds().toString().padStart(2, '0'),
  60.             week = date.getDay(),
  61.             weekList = ["星期一", "星期二","星期三", "星期四","星期五", "星期六","星期日"];
  63.         if (type) {
  64.             if (type === "all") {
  65.                 return `${year}-${month}-${day} ${hour}:${minutes}:${seconds} ${weekList[week - 1]}`;
  66.             }
  68.             return type.replace("年", year).replace("月", month).replace("日", day)
  69.                 .replace("时", hour).replace("分", minutes).replace("秒", seconds)
  70.                 .replace("星期", weekList[week - 1]);
  71.         }
  72.         return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
  73.     }
  74.     getVariable(key) {
  75.         return this.#variableMap[key];
  76.     }
  77.     setVariable(key, value) {
  78.         this.#variableMap[key] = value;
  79.         return ""
  80.     }
  81. }
  83. export default ReplaceText;

showText.css

  1. .heimu {
  2.     background-color: currentColor;
  3.     transition: background-color .2s;
  4. }
  5. .heimu:hover {
  6.     background-color: transparent;
  7. }
  9. ruby,
  10. rp,
  11. rt {
  12.     background-color: inherit;
  13. }