构建交互式回文文本编辑器：光标与字符同步镜像指南

本文详细探讨了如何构建一个双输入框的实时回文文本编辑器。核心内容包括：同步追踪用户在两个输入框中的光标位置，实现文本内容的实时镜像反转，并在此过程中智能过滤掉空格和标点符号，确保只有字母数字字符参与回文构建，从而提供流畅且符合逻辑的用户体验。

核心挑战与设计思路

开发一个能够实时同步两个输入框、实现回文镜像功能且能智能处理非字母数字字符的编辑器，涉及到多个交互和数据处理层面的挑战。其核心目标是：当用户在一个输入框中操作（输入或移动光标）时，另一个输入框能实时反映出对应的回文状态和光标位置，同时忽略非字母数字字符。

我们将主要关注以下四个关键方面：

1. 活动输入框与光标位置跟踪：确定用户当前正在操作哪个输入框，并获取其精确的光标位置。
2. 字符类型校验与过滤：识别并区分字母数字字符与非字母数字字符（如空格、标点），确保只有前者参与回文逻辑。
3. 实时文本同步与反转：在用户输入时，将活动输入框的文本处理后，反转并更新到非活动输入框。
4. 光标位置的精确映射：根据活动输入框的光标位置，计算出非活动输入框中对应的光标位置，尤其要考虑非字母数字字符的影响。

任务分解与实现策略

1. 跟踪活动输入框与光标位置

为了实现双向同步，我们需要两个独立的文本输入框（例如 或 <input type="text">）。

实现步骤：

• HTML 结构：创建两个输入框，并为其分配唯一的 ID，以便在 JavaScript 中访问。

• 事件监听：为两个输入框添加事件监听器，以捕获用户的交互。
  • focus 事件：用于确定哪个输入框当前是活动的。
  • input 事件：当用户输入文本时触发，用于实时更新内容。
  • keyup 或 click 事件：用于在用户移动光标（不输入）时更新光标位置。
• 状态管理：使用一个变量（例如 activeFieldId）来存储当前活动的输入框的 ID。

示例代码结构：

const leftField = document.getElementById('leftField');
const rightField = document.getElementById('rightField');
let activeField = null; // 存储当前活动的DOM元素

leftField.addEventListener('focus', () => { activeField = leftField; });
rightField.addEventListener('focus', () => { activeField = rightField; });

leftField.addEventListener('input', syncFields);
rightField.addEventListener('input', syncFields);

leftField.addEventListener('keyup', syncFields);
rightField.addEventListener('keyup', syncFields);

leftField.addEventListener('click', syncFields);
rightField.addEventListener('click', syncFields);

function syncFields(event) {
    if (!activeField) return; // 如果没有活动字段，则不执行同步
    const sourceField = activeField;
    const targetField = (activeField === leftField) ? rightField : leftField;

    // ... 后续逻辑将在这里实现
}

在 syncFields 函数中，我们可以通过 sourceField.selectionStart 和 sourceField.selectionEnd 获取当前光标的起始和结束位置。

2. 字符类型校验与过滤机制

这是实现“排除空格和标点符号”的关键。我们需要一个通用的函数来判断一个字符是否为字母数字，以及一个函数来过滤字符串中的非字母数字字符。

实现步骤：

• isAlphanumeric 函数：使用正则表达式来判断字符。
• filterAlphanumeric 函数：遍历字符串，只保留字母数字字符。

示例代码：

/**
 * 检查字符是否为字母数字（英文大小写字母或数字）
 * @param {string} char
 * @returns {boolean}
 */
function isAlphanumeric(char) {
    return /^[a-zA-Z0-9]$/.test(char);
}

/**
 * 从字符串中过滤掉所有非字母数字字符
 * @param {string} text
 * @returns {string} 仅包含字母数字字符的字符串
 */
function filterAlphanumeric(text) {
    return text.split('').filter(isAlphanumeric).join('');
}

这个过滤机制将用于：

Pic Copilot

AI时代的顶级电商设计师，轻松打造爆款产品图片

下载

• 在将文本镜像到另一个字段之前。
• 在计算光标在非活动字段中的映射位置时，忽略非字母数字字符的长度。

3. 实时文本同步与反转逻辑

当用户在活动字段中输入时，我们需要获取其内容，过滤掉非字母数字字符，然后反转，并将其设置到非活动字段。

实现步骤：

1. 从 sourceField 获取当前值。
2. 使用 filterAlphanumeric 过滤掉非字母数字字符。
3. 将过滤后的字符串反转。
4. 将反转后的字符串设置到 targetField 的 value 属性。

示例代码（集成到 syncFields）：

function syncFields() {
    if (!activeField) return;

    const sourceField = activeField;
    const targetField = (activeField === leftField) ? rightField : leftField;

    const sourceText = sourceField.value;
    const filteredSourceText = filterAlphanumeric(sourceText);
    const reversedTargetText = filteredSourceText.split('').reverse().join('');

    // 临时禁用目标字段的事件监听，避免循环触发
    targetField.removeEventListener('input', syncFields);
    targetField.removeEventListener('keyup', syncFields);
    targetField.removeEventListener('click', syncFields);

    targetField.value = reversedTargetText;

    // 重新启用目标字段的事件监听
    targetField.addEventListener('input', syncFields);
    targetField.addEventListener('keyup', syncFields);
    targetField.addEventListener('click', syncFields);

    // ... 接下来处理光标同步
    syncCursorPosition(sourceField, targetField);
}

注意：在更新 targetField.value 时，需要暂时移除并重新添加事件监听器，以防止因程序性修改 value 属性而触发 input 事件，导致无限循环。

4. 光标位置的精确映射

这是最复杂的部分，因为两个字段的实际字符串长度可能不同（一个包含空格标点，另一个不包含），且回文意味着文本是反向的。

实现步骤：

1. 获取活动字段的光标位置：sourceField.selectionStart。
2. 计算活动字段中光标前的字母数字字符数：遍历 sourceField.value 从开头到 selectionStart，统计字母数字字符的数量。
3. 计算目标字段中对应的字母数字光标位置：
   • 获取活动字段的全部字母数字字符数 (filterAlphanumeric(sourceText).length)。
   • 目标字段的字母数字光标位置 = (活动字段的全部字母数字字符数) - (活动字段光标前的字母数字字符数)。
   • 例如，如果活动字段是 [bard|s loop]，光标前有4个字母数字字符（bard），总共有8个字母数字字符（bardsloop）。那么目标字段的光标应该在 8 - 4 = 4 个字母数字字符之后。
   • 但实际回文是 [pools| drab]，光标在 pools 之后，即第5个字母数字字符之后。这是因为回文是反转的。
   • 正确的逻辑是：如果活动字段光标前的字母数字字符数为 N，且活动字段总共有 M 个字母数字字符，那么在反转后的目标字段中，光标应该位于第 M - N 个字母数字字符之后。
     • 例：[bard|s loop] (N=4, M=8)。目标字段的字母数字光标应在第 8-4=4 个字母数字字符之后。
     • poolsdrab (反转的字母数字文本)。第4个字母数字字符是 l。所以光标在 pool|sdrab。这与示例 [pools| drab] 不符。

重新审视示例：[bard|s loop] -> [pools| drab]

• 左字段：bards loop。光标在 d 和 s 之间。
  • 光标前的字母数字字符：bard (4个)。
  • 总字母数字字符：bardsloop (9个)。
• 右字段：pools drab。光标在 s 和 ` ` 之间。
  • 光标前的字母数字字符：pools (5个)。
  • 总字母数字字符：poolsdrab (9个)。

观察发现： 左字段光标前的字母数字字符数 N_left = 4。 右字段光标前的字母数字字符数 N_right = 5。 总字母数字字符数 M = 9。 N_left + N_right = 4 + 5 = 9 = M。

因此，如果活动字段的光标前有 N 个字母数字字符，那么在目标字段中，光标应该位于 M - N 个字母数字字符之后。

实现 syncCursorPosition 函数：

/**
 * 同步光标位置
 * @param {HTMLTextAreaElement} sourceField 活动字段
 * @param {HTMLTextAreaElement} targetField 目标字段
 */
function syncCursorPosition(sourceField, targetField) {
    const sourceText = sourceField.value;
    const targetText = targetField.value; // 目标字段已经更新为反转的过滤文本

    const sourceCursorPos = sourceField.selectionStart;

    let alphaCharsBeforeSourceCursor = 0;
    for (let i = 0; i < sourceCursorPos; i++) {
        if (isAlphanumeric(sourceText[i])) {
            alphaCharsBeforeSourceCursor++;
        }
    }

    const totalAlphaChars = filterAlphanumeric(sourceText).length;

    // 计算目标字段中对应的字母数字光标位置
    // 如果源字段光标前有 N 个字母数字字符，总共有 M 个，
    // 则在目标字段（反转后）中，光标应位于第 M - N 个字母数字字符之后。
    const targetAlphaCursorPos = totalAlphaChars - alphaCharsBeforeSourceCursor;

    let actualTargetCursorPos = 0;
    let currentAlphaCount = 0;
    for (let i = 0; i < targetText.length; i++) {
        if (isAlphanumeric(targetText[i])) {
            currentAlphaCount++;
        }
        if (currentAlphaCount === targetAlphaCursorPos) {
            actualTargetCursorPos = i + 1; // 光标在当前字符之后
            break;
        }
    }
    // 处理光标在末尾的情况
    if (currentAlphaCount < targetAlphaCursorPos) {
        actualTargetCursorPos = targetText.length;
    }

    targetField.selectionStart = actualTargetCursorPos;
    targetField.selectionEnd = actualTargetCursorPos;
}

完整示例代码结构