如何简化故障文本(Glitch Text)生成代码？大写字母适配问题求解

1. 核心改进思路 #

• 用映射对象存储字母与故障文本的对应关系，替代多次replace调用，大幅简化代码
• 用单个正则匹配所有英文字母（大小写），通过回调函数动态替换，解决大写字母未处理的问题

2. 重构后的完整代码 #

<button id="GLITCH">Glitch</button>
<textarea id="MainText">abcdefghijklmnopqrstuvwzy

ABCDEFGHIJKLMNOPQRSTUVWXYZ</textarea>

<style>
textarea {
  width: 200px;
  height: 75px;
}
</style>

<script>
function initGlitch() {
  // 字母到故障文本的映射表，补全所有26个字母的对应关系
  const glitchMap = {
    a: "a̵͎͕͖̯͘ͅ",
    b: "b̸̺͎̅̀͗̚",
    c: "c̷̛̹̣͓̼̻̃͂̓̔͛",
    d: "d̸̜̻͎̥̍͛̍̾",
    e: "ȩ̴͓̼̺̪̯̝̿͆͒",
    f: "f",
    g: "g",
    h: "h̴̛̰̱̪́̔̈́̑̆̀͘",
    i: "i̸͚̼̇̃",
    j: "j̵̰̺͎̫̳̭͚̫̆̍̋ͅ",
    k: "k̶̮̼̦̻̗̝͚̄͑͜͜ͅ",
    l: "l̷̢̗͉̭̩̩͓̹̤͝ͅ",
    m: "m̶̭͍̘̳̱̭̋͆͐̋̏̀͜",
    n: "n̶̻̤̝̥̹̗̈́̍̾̂̈̓͗͘͜͝",
    o: "o̸͖̘͛̓͐̿",
    p: "p̷̻̘̥̳̯̻͈̆̐̐̾̉̾͌͂̌̚͜",
    q: "q",
    r: "r̶̺̖̼̖̰͕̽͐̏̒͗͒̈",
    s: "s̵͙̼͎̳̑̇̊̍",
    t: "t̵̢̡͓͚̬̥̺͉̩͖́̄̂̀̆̈͂",
    u: "u",
    v: "v",
    w: "ẅ̶̖̣́̉̕",
    x: "x",
    y: "ý̸̢̻̳̣͓̘͐̾̉͘̕",
    z: "z̸͓̟̑͒̕"
  };

  document.getElementById("GLITCH").addEventListener('click', function() {
    const inputText = document.getElementById("MainText");
    inputText.value = inputText.value.replace(/[a-z]/gi, (match) => {
      // 获取小写字母作为映射键
      const lowerChar = match.toLowerCase();
      // 获取对应的故障文本，若不存在则返回原字符
      let glitchChar = glitchMap[lowerChar] || match;
      // 如果原字符是大写，将故障文本的首字母转为大写
      if (match === match.toUpperCase()) {
        glitchChar = glitchChar.charAt(0).toUpperCase() + glitchChar.slice(1);
      }
      return glitchChar;
    });
  });
}

initGlitch();
</script>

3. 关键优化点说明 #

• 映射对象：将所有替换规则集中管理，便于维护和修改，避免重复调用replace
• 正则匹配：/[a-z]/gi匹配所有大小写英文字母，确保没有遗漏
• 动态替换回调：根据匹配到的字符的大小写，返回对应的故障文本，完美处理大写字母
• 补全缺失字母：原代码遗漏了q、v、x，现在统一补全，避免部分字母无法转换

内容的提问来源于stack exchange，提问作者mAttiiiii