请用js实现文本变换_用于输入法词库制作？

Question

请改写成html中文本框<textarea>输入及输出文本形式
可参考以下正确的js代码 :

function generateTransformations(text) {
  // 分割文本行以找到包含“ing”的词
  const parts = text.split('\t');
  const words = parts[1].split(' ');

  // 找到所有“ing”结尾的词并生成替换列表
  const replacements = words.map(word => word.endsWith('ing') ? [word, word.replace('ing', 'ed')] : [word]);

  // 计算所有可能的组合
  const combinations = generateCombinations(replacements);

  // 构建并返回最终的文本行
  return combinations.map(combination => `${parts[0]}\t${combination.join(' ')}\t${parts[2]}`).join('\n');
}

function generateCombinations(replacements, prefix = [], index = 0) {
  // 递归基准条件
  if (index === replacements.length) {
    return [prefix];
  }

  // 为当前位置的每个可能选择生成更多组合
  const output = [];
  replacements[index].forEach(replacement => {
    output.push(...generateCombinations(replacements, [...prefix, replacement], index + 1));
  });

  return output;
}

// 输入文本
const text = "拼读写\tpining duing xieing\t80%";

// 生成并打印所有变换行
console.log(generateTransformations(text));

现在 请你把输入文本的方式更改一下,
使这样形式:

const text = "拼读写存\tpining duing xieing cuning\t80%"

请你改写成这样输入文本框<textarea>形式写入html中,
再增加一个结果输出文本框,
在上下两个两个文本框之间 添加三个按钮
"转换", "复制", "清除" :

<textarea id="code" rows="27" style="height: 260px">
拼读写    pining duing xieing    80%
拼读写存    pining duing xieing cuning    80%
</textarea>

已知某文本中其中一行是:

拼读写 pining duing xieing 80%

要求用js代码变换出以下8行文本:

拼读写    pining duing xieing    80%
拼读写    pined duing xieing    80%
拼读写    pining dued xieing    80%
拼读写    pining duing xieed    80%
拼读写    pined dued xieing    80%
拼读写    pined duing xieed    80%
拼读写    pining dued xieed    80%
拼读写    pined dued xieed    80%

---

注意看,第一行变换了0个ing,
第二三四行各变换了1个ing,
第五六七行各变换了2个ing,
第八行变换了3个ing,
一共变换出了八行,即 8=2^3,

若其中一行文本中有4个ing,
那么就会变换出十六行,即 16=2^4
比如:
拼读写存 pining duing xieing cuning 80%
会变换出十六行:
拼读写存 pining duing xieing cuning 80%
拼读写存 pined duing xieing cuning 80%
...... ......
拼读写存 pining dued xieed cuned 80%
拼读写存 pined dued xieed cuned 80%