JavaScript回文文本对程序开发：双输入框光标同步与逻辑规划

以下是将你的需求拆分为可落地的小任务，按模块划分，每个任务对应明确的实现逻辑：

一、基础结构与状态管理 #

• 创建两个可编辑输入框（推荐用<textarea>支持多行），分别设置唯一ID（如left-input、right-input）
• 定义全局状态变量，用于追踪核心数据：
  • activeInput：存储当前获得焦点的输入框DOM元素
  • originalTexts：对象，保存左右输入框的原始文本（含空格、标点），格式：{ left: '', right: '' }
  • letterOnlyTexts：对象，保存左右输入框提取出的纯字母文本（用于回文映射），格式：{ left: '', right: '' }

二、追踪激活输入框 #

• 给两个输入框绑定focus事件：触发时将activeInput设为当前输入框
• （可选）绑定blur事件：用于重置激活状态（如果需要处理失去焦点后的逻辑）

三、字符过滤工具函数实现 #

• 编写extractLetters(str)：从字符串中提取所有字母（忽略空格、标点等非字母），返回纯字母字符串

  function extractLetters(str) {
    return str.replace(/[^a-zA-Z]/g, '');
  }
  

• 编写isNonLetter(char)：判断单个字符是否为非字母

  function isNonLetter(char) {
    return !/[a-zA-Z]/.test(char);
  }
  

四、光标位置映射核心逻辑 #

这部分是实现光标同步的关键，需要建立「原始文本光标位置」与「纯字母文本索引」的双向转换：

1. 原始光标转纯字母索引：编写getLetterIndexFromCursor(inputEl)
   • 获取输入框当前光标位置，截取光标前的文本，提取其中的纯字母，长度即为对应的纯字母索引

   function getLetterIndexFromCursor(inputEl) {
     const cursorPos = inputEl.selectionStart;
     const textBeforeCursor = inputEl.value.slice(0, cursorPos);
     return extractLetters(textBeforeCursor).length;
   }
   

2. 纯字母索引转原始光标位置：编写getCursorFromLetterIndex(inputEl, targetLetterIndex)
   • 遍历输入框的原始文本，统计字母数量，当计数达到目标索引时，返回当前的原始文本位置

   function getCursorFromLetterIndex(inputEl, targetLetterIndex) {
     let letterCount = 0;
     const fullText = inputEl.value;
     for (let i = 0; i < fullText.length; i++) {
       if (/[a-zA-Z]/.test(fullText[i])) {
         if (letterCount === targetLetterIndex) return i;
         letterCount++;
       }
     }
     return fullText.length; // 光标在文本末尾的情况
   }
   

3. 跨输入框光标映射：当激活输入框的纯字母索引为activeIdx，目标输入框的纯字母索引为targetIdx = letterOnlyTexts[targetSide].length - activeIdx，再用上面的函数转成原始光标位置

五、实时输入同步逻辑 #

给两个输入框绑定input事件，触发时按以下步骤执行：

1. 更新当前激活输入框的originalTexts和letterOnlyTexts
2. 判断本次输入的字符是否为非字母：
   • 若是：仅更新当前输入框数据，不修改目标输入框
   • 若否：
     • 提取本次输入的字母内容，反转后得到回文字符串（如输入"mood"→"doom"）
     • 计算目标输入框中对应的插入位置（通过光标映射逻辑）
     • 将反转后的字母插入目标输入框的对应位置，保留目标框原有非字母字符
     • 更新目标输入框的originalTexts和letterOnlyTexts
3. 同步光标位置到目标输入框：用光标映射逻辑计算目标位置，设置targetInput.selectionStart和selectionEnd

六、光标移动同步 #

给两个输入框绑定click、keyup事件（处理鼠标点击、方向键移动光标），触发时：

1. 计算当前激活输入框对应的纯字母索引
2. 映射得到目标输入框的纯字母索引
3. 转换为目标输入框的原始光标位置并设置

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