构建交互式回文文本编辑器：光标与字符同步镜像指南-js教程-PHP中文网

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

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

核心挑战与设计思路

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

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

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

任务分解与实现策略

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

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

实现步骤：

HTML 结构：创建两个输入框，并为其分配唯一的 ID，以便在 JavaScript 中访问。
```
<textarea id="leftField"></textarea>
<textarea id="rightField"></textarea>
```
登录后复制
事件监听：为两个输入框添加事件监听器，以捕获用户的交互。
- 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('');
}

登录后复制

这个过滤机制将用于：

STORYD

帮你写出让领导满意的精美文稿

164

查看详情

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

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

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

实现步骤：

从 sourceField 获取当前值。
使用 filterAlphanumeric 过滤掉非字母数字字符。
将过滤后的字符串反转。
将反转后的字符串设置到 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. 光标位置的精确映射

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

实现步骤：

获取活动字段的光标位置：sourceField.selectionStart。
计算活动字段中光标前的字母数字字符数：遍历 sourceField.value 从开头到 selectionStart，统计字母数字字符的数量。
计算目标字段中对应的字母数字光标位置：
- 获取活动字段的全部字母数字字符数 (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;
}

登录后复制

完整示例代码结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回文文本编辑器</title>
    <style>
        body { font-family: sans-serif; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background-color: #f4f4f4; padding: 20px; box-sizing: border-box; }
        .container { display: flex; gap: 20px; width: 80%; max-width: 900px; }
        textarea {
            width: 50%;
            height: 150px;
            padding: 10px;
            font-size: 1.2em;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
            resize: vertical;
        }
        textarea:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
            outline: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <textarea id="leftField" placeholder="输入左侧文本"></textarea>
        <textarea id="rightField" placeholder="右侧回文镜像"></textarea>
    </div>

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

        // 辅助函数：判断字符是否为字母数字
        function isAlphanumeric(char) {
            return /^[a-zA-Z0-9]$/.test(char);
        }

        // 辅助函数：过滤字符串中的非字母数字字符
        function filterAlphanumeric(text) {
            return text.split('').filter(isAlphanumeric).join('');
        }

        // 同步光标位置
        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 个字母数字字符之后

登录后复制

以上就是构建交互式回文文本编辑器：光标与字符同步镜像指南的详细内容，更多请关注php中文网其它相关文章！