构建实时回文文本编辑器：光标同步与字符过滤策略

本文将深入探讨如何实现一个高级双输入字段的回文文本编辑器。核心挑战在于实时同步两个文本字段中的用户光标位置，同时确保一个字段中的输入能即时、选择性地（排除空格和标点符号）镜像到另一个字段，并保持其回文结构。我们将详细拆解逻辑，涵盖字符过滤、字符串反转、光标映射与文本重构的关键技术点，旨在提供一个清晰、专业的实现指南。

引言：实时回文编辑器面临的挑战

构建一个实时回文文本编辑器，其核心需求是提供两个可编辑的输入字段，它们的内容互为回文，并能即时响应用户的输入。这不仅仅是简单的文本反转，更需要精细地处理以下复杂场景：

1. 光标同步： 用户在一个字段中移动光标时，另一个字段的光标也应同步到其对应的镜像位置。例如，在 [bard|s loop] 和 [pools| drab] 中，光标在 "d" 和 "s" 之间，对应的镜像位置也在 "s" 和 " " 之间。
2. 选择性字符镜像： 当用户输入时，只有字母字符才会被镜像到另一个字段。空格、标点符号等非字母字符应在活动字段中正常显示，但不会直接复制到非活动字段，而是通过一种结构同步机制进行处理。
3. 文本重构： 非活动字段的文本需要根据活动字段的“干净”（仅含字母）内容及其非字母字符结构进行重构，以确保视觉上的连贯性和回文的准确性。例如，在 [bard mood|s loop] 输入后，非活动字段应变为 [pools|doom drab]，其中 mood 的镜像 doom 被插入，但原始的空格结构得到保留。

为了实现这一复杂功能，我们需要将问题分解为几个可管理的任务。

MarsX

AI驱动快速构建App，低代码无代码开发，改变软件开发的游戏规则

159

查看详情

核心逻辑拆解与实现策略

1. 跟踪活动字段与光标位置

实现光标同步是用户体验的关键。我们需要知道哪个输入字段当前是活动的，以及光标在其中的精确位置。

实现步骤：

• DOM 元素获取： 首先，获取两个文本输入框的 DOM 引用。

  const inputFieldA = document.getElementById('fieldA');
  const inputFieldB = document.getElementById('fieldB');
  let activeField = null; // 存储当前活动字段

  登录后复制
• 活动字段识别： 监听 focus 和 blur 事件来确定哪个字段是活动的。

  inputFieldA.addEventListener('focus', () => activeField = inputFieldA);
  inputFieldB.addEventListener('focus', () => activeField = inputFieldB);
  inputFieldA.addEventListener('blur', () => activeField = null);
  inputFieldB.addEventListener('blur', () => activeField = null);

  登录后复制
• 获取光标位置： 使用 selectionStart 属性来获取光标在当前活动字段中的位置。这个属性在 input、keyup 或 mouseup 事件中可以获取到。

  inputFieldA.addEventListener('input', handleInput);
  inputFieldB.addEventListener('input', handleInput);
  inputFieldA.addEventListener('mouseup', handleCursorChange); // 鼠标点击移动光标
  inputFieldB.addEventListener('mouseup', handleCursorChange);
  inputFieldA.addEventListener('keyup', handleCursorChange); // 键盘方向键移动光标
  input

  登录后复制

以上就是构建实时回文文本编辑器：光标同步与字符过滤策略的详细内容，更多请关注php中文网其它相关文章！