如何实现LGP-30模拟器中Friden Flexowriter退格重叠字符功能？

针对你模拟LGP-30和Friden Flexowriter的需求，以下几种方案可以简化字符重叠的实现，无需手动维护每个位置的字符数组：

一、CSS层面的精准调整 #

因为使用等宽字体，推荐用ch单位代替固定的em值，确保重叠位置的精准性：

/* 让字符左移一个等宽字符的宽度，实现重叠 */
.overlap {
  margin-left: -1ch;
}

1ch在等宽字体中恰好等于一个字符的宽度，无论字体大小如何调整，都能保证后续字符精准覆盖在前一个字符的位置上，比固定的-0.6em更通用。

二、TypeScript解析函数自动生成HTML #

编写一个解析函数，将包含退格标记（如&bksp;或ASCII退格符\b）的输入文本自动转换成带重叠类的HTML，无需手动拼接：

function parseFlexowriterText(input: string): string {
  const charPositions: string[][] = [];
  let cursorPos = 0;

  // 分割输入为普通字符和退格标记
  const tokens = input.split(/(&bksp;|\b)/);
  
  for (const token of tokens) {
    // 处理退格：光标左移（不能小于0）
    if (token === '&bksp;' || token === '\b') {
      cursorPos = Math.max(0, cursorPos - 1);
      continue;
    }

    // 处理普通字符：添加到当前光标位置，然后光标右移
    for (const char of token) {
      if (!charPositions[cursorPos]) {
        charPositions[cursorPos] = [];
      }
      charPositions[cursorPos].push(char);
      cursorPos++;
    }
  }

  // 将每个位置的重叠字符转换为HTML
  return charPositions.map(chars => {
    if (chars.length === 0) return '';
    // 第一个字符正常显示，后续字符添加重叠类
    return chars[0] + chars.slice(1).map(c => `<span class="overlap">${c}</span>`).join('');
  }).join('');
}

使用示例： #

输入：

O&bksp;/
text&bksp;&bksp;&bksp;&bksp;____

解析后生成的HTML：

O<span class="overlap">/</span>
t<span class="overlap">_</span>e<span class="overlap">_</span>x<span class="overlap">_</span>t<span class="overlap">_</span>

这样你只需要传入带退格标记的文本，函数会自动处理光标位置和重叠字符的HTML生成，完全替代手动维护字符数组的工作。

三、可选：简化输入标记 #

如果你觉得&bksp;太繁琐，可以直接使用ASCII退格符\b（字符编码\x08）作为输入标记，只需要修改解析函数中的分割规则即可，这样输入更贴近真实的打字机指令流。

四、Node.js工具集成 #

不需要额外的第三方库，上述TypeScript函数可以直接编译为JavaScript在Node.js环境中使用，或者封装成一个小模块，用于批量处理输入文本生成对应的HTML输出。如果需要处理更复杂的终端指令，可以基于此函数扩展，支持更多老式打字机的特殊指令。

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