JavaScript开发Pig Latin翻译器标点出现在词中而非末尾如何解决

云上老周

2026-10-6

Pig Latin翻译器标点位置异常修复方案

问题核心

现有代码未区分单词末尾的标点和字母内容，标点被识别为单词的一部分参与转换逻辑，导致位置错位。

修复思路

处理每个单词前，先用正则提取末尾的非字母字符单独存储
仅对纯字母部分执行Pig Latin转换
转换完成后再把提取的标点拼接回结果末尾

修复后完整代码

HTML代码

<input id="textInput" />
<p id="textOutput"></p>

JS代码

const textInput = document.getElementById("textInput");
const textOutput = document.getElementById("textOutput");
const vowels = ["a", "e", "i", "o", "u", "A", "E", "I", "O", "U"];
const ending = "-yay";

textInput.addEventListener("keyup", (e) => {
  const input = e.target.value;
  const words = input.split(" ");
  const output = words.map((word) => pigLatinConverter(word)).join(" ");
  textOutput.innerText = output;
});

const pigLatinConverter = (input) => {
  // 拆分单词的字母部分和末尾标点部分
  const [, pureWord, punctuation = ''] = input.match(/^([a-zA-Z]+)([^a-zA-Z]*)$/) || [, input, ''];
  let output;
  
  if (vowels.includes(pureWord[0])) {
    output = pureWord + ending;
  } else {
    let consonants = "";
    for (let i = 0; i < pureWord.length; i++) {
      if (vowels.includes(pureWord[i])) {
        break;
      }
      consonants += pureWord[i];
    }
    if (consonants === "") {
      output = pureWord.substring(consonants.length) + " ";
    } else {
      output = pureWord.substring(consonants.length) + `-${consonants}ay`;
    }
  }
  // 拼接回标点
  return output + punctuation;
};