实现同步回文输入框：光标与文本的智能镜像与过滤

<textarea id="leftField" placeholder="输入左侧文本"></textarea>
<textarea id="rightField" placeholder="输入右侧文本" dir="rtl"></textarea>

let activeFieldId = null;

document.getElementById('leftField').addEventListener('focus', () => {
    activeFieldId = 'leftField';
});
document.getElementById('rightField').addEventListener('focus', () => {
    activeFieldId = 'rightField';
});
document.getElementById('leftField').addEventListener('blur', () => {
    activeFieldId = null;
});
document.getElementById('rightField').addEventListener('blur', () => {
    activeFieldId = null;
});

/**
 * 过滤字符串中的非字母字符，并转换为小写。
 * @param {string} text - 原始字符串。
 * @returns {string} - 仅包含小写字母的字符串。
 */
function filterLetters(text) {
    return text.replace(/[^a-zA-Z]/g, '').toLowerCase();
}

/**
 * 计算给定字符串中，在指定索引位置之前有多少个字母字符。
 * @param {string} text - 原始字符串。
 * @param {number} index - 光标位置。
 * @returns {number} - 字母字符的数量。
 */
function countLettersBeforeIndex(text, index) {
    let count = 0;
    for (let i = 0; i < index; i++) {
        if (/[a-zA-Z]/.test(text[i])) {
            count++;
        }
    }
    return count;
}

/**
 * 将过滤后的光标位置映射回原始字符串。
 * @param {string} originalText - 原始字符串。
 * @param {number} filteredCursorPos - 在过滤字符串中的光标位置。
 * @returns {number} - 在原始字符串中的光标位置。
 */
function mapFilteredCursorToOriginal(originalText, filteredCursorPos) {
    let originalCursor = 0;
    let letterCount = 0;
    while (originalCursor < originalText.length && letterCount < filteredCursorPos) {
        if (/[a-zA-Z]/.test(originalText[originalCursor])) {
            letterCount++;
        }
        originalCursor++;
    }
    // 如果 filteredCursorPos 超出了原始文本的字母数量，光标应在文本末尾
    if (letterCount < filteredCursorPos && originalCursor === originalText.length) {
        return originalText.length;
    }
    return originalCursor;
}

// 示例光标映射逻辑（在主处理函数中调用）
function getMirroredCursorPosition(activeFieldText, inactiveFieldText, activeCursorPos) {
    const activeFieldLettersCount = countLettersBeforeIndex(activeFieldText, activeCursorPos);

    // 右侧是左侧过滤后反转的字符串
    const inactiveFieldFilteredLetters = filterLetters(activeFieldText).split('').reverse().join('');

    // 在右侧过滤后的字符串中，光标位置是 (总字母数 - 左侧字母数)
    const mirroredFilteredCursorPos = inactiveFieldFilteredLetters.length - activeFieldLettersCount;

    // 将这个过滤后的光标位置映射回右侧的原始字符串
    const targetFieldOriginalText = inactiveFieldText; // 假设非活动字段的当前内容
    return mapFilteredCursorToOriginal(targetFieldOriginalText, mirroredFilteredCursorPos);
}

const leftField = document.getElementById('leftField');
const rightField = document.getElementById('rightField');

function synchronizeFields() {
    const activeField = activeFieldId === 'leftField' ? leftField : rightField;
    const inactiveField = activeFieldId === 'leftField' ? rightField : leftField;

    if (!activeField || !inactiveField) return;

    const activeText = activeField.value;
    const activeCursorPos = activeField.selectionStart;

    // 1. 过滤并反转活动字段的文本
    const filteredActiveText = filterLetters(activeText);
    const mirroredText = filteredActiveText.split('').reverse().join('');

    // 2. 更新非活动字段的文本
    // 注意：这里直接设置的是过滤反转后的文本。
    // 如果希望非活动字段也保留非字母字符，则需要更复杂的插入逻辑。
    // 当前实现假设非活动字段只显示镜像的字母。
    // 如果非活动字段也需要显示用户输入的非字母字符，则需要根据镜像的字母插入到原文本中。
    // 为了简化，我们暂时只更新字母部分，并保留原有非字母字符的位置。
    let newInactiveValue = '';
    let mirroredTextIndex = 0;
    for (let i = 0; i < inactiveField.value.length; i++) {
        if (/[a-zA-Z]/.test(inactiveField.value[i])) {
            newInactiveValue += mirroredText[mirroredTextIndex] || '';
            mirroredTextIndex++;
        } else {
            newInactiveValue += inactiveField.value[i];
        }
    }
    // 处理如果镜像文本更长的情况
    if (mirroredTextIndex < mirroredText.length) {
        newInactiveValue += mirroredText.substring(mirroredTextIndex);
    }
    inactiveField.value = newInactiveValue;


    // 3. 计算并设置非活动字段的光标位置
    const newCursorPos = getMirroredCursorPosition(activeText, inactiveField.value, activeCursorPos);
    inactiveField.selectionStart = newCursorPos;
    inactiveField.selectionEnd = newCursorPos;
}

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

// 还需要监听 'click' 事件来更新光标位置，即使没有输入
leftField.addEventListener('click', synchronizeFields);
rightField.addEventListener('click', synchronizeFields);