MERN应用中如何在textarea组件内实现文本模板的变量插入功能？

整个功能的核心难点是不打乱用户输入节奏、精准在光标位置插入变量，不需要引入复杂的富文本库，基于原生textarea完全可以实现：

• 光标位置缓存逻辑
  这是实现精准插入的基础：通过textarea的ref绑定光标变化事件，实时缓存用户当前的输入光标起止位置，不管后续弹出什么变量选择面板，都不能丢失这个缓存值。
  核心参考实现：

  const textareaRef = useRef(null);
  const [cursorRange, setCursorRange] = useState({ start: 0, end: 0 });
  const [templateContent, setTemplateContent] = useState("");
  
  // 监听textarea光标/选中文本变化
  const trackCursorPosition = () => {
    const textareaEl = textareaRef.current;
    if (!textareaEl) return;
    setCursorRange({
      start: textareaEl.selectionStart,
      end: textareaEl.selectionEnd
    });
  };
  

• 变量插入核心方法
  当用户从变量列表选中某个变量标签（比如统一约定的{{user_name}}格式）时，基于之前缓存的光标位置，把原始模板文本拆成“光标前片段”“光标后片段”，将变量标签拼接在中间，更新textarea的整体值；插入完成后立刻把焦点切回textarea，把光标位置挪到刚插入的变量标签末尾，避免下一次插入错位：

  const insertVariable = (variableTag) => {
    const textareaEl = textareaRef.current;
    if (!textareaEl) return;
    const { start, end } = cursorRange;
    // 拼接新的模板文本
    const nextContent = 
      templateContent.slice(0, start) + 
      variableTag + 
      templateContent.slice(end);
    setTemplateContent(nextContent);
    // 插完后修正光标位置
    requestAnimationFrame(() => {
      textareaEl.focus();
      textareaEl.setSelectionRange(
        start + variableTag.length,
        start + variableTag.length
      );
      // 更新当前光标位置为新的点
      setCursorRange({
        start: start + variableTag.length,
        end: start + variableTag.length
      })
    })
  }
  

• 交互体验优化
  • 把变量选择的触发按钮固定在textarea的工具栏位置，点击弹出的变量浮层定位紧跟当前光标位置，不要悬浮在页面边角打断输入流
  • 可增加快捷触发逻辑：当用户输入/时自动弹出变量选择面板，支持输入关键词过滤变量列表
  • 变量标签高亮：如果要给用户直观提示哪些内容是插入的变量，不需要替换原生textarea，只需要在textarea下方叠一层完全透明的高亮层，把匹配到{{变量名}}格式的文本换成高亮样式，对齐textarea的行高、字体、内边距即可实现效果，兼容性比contenteditable方案好很多

作为MERN栈的后端部分，核心负责模板存储、变量渲染、接口校验三个部分：

• 模板存储设计
  MongoDB中存储的模板内容必须保留原始的变量标签，不要在存储阶段就把变量替换成硬编码的用户值——比如存的内容是尊敬的{{user_name}}，您的快递单号为{{tracking_number}}，只有这样模板才能复用到不同的用户场景。
• 变量渲染逻辑
  当需要基于模板生成实际发送/展示的内容时，用正则匹配所有{{xxx}}格式的变量，和传入的变量值映射表做替换即可，不需要引入重量级的模板引擎：

  const renderTemplateWithVariables = (templateText, variableMap) => {
    const variablePattern = /{{\s*([\w_]+)\s*}}/g;
    return templateText.replace(variablePattern, (match, variableKey) => {
      // 匹配到存在的变量就替换，没匹配到就保留原标签提示用户补全
      return variableMap[variableKey] ?? match;
    })
  }
  

• 接口安全校验
  后端接收前端提交的模板内容时，要通过正则提取所有出现的变量名，和系统预设的可用变量白名单做比对，拦截用户插入无权限的自定义变量，避免出现越权读取敏感数据的问题。

• 不要混用受控、非受控的textarea组件：要么全程用state管理textarea的value，要么全程通过ref操作DOM，两种模式混用来回切换会导致输入时光标自动跳转到文本开头的经典问题。
• 变量插入后必须强制将焦点切回textarea：如果弹出变量选择面板后没有主动把焦点还给文本框，用户选完变量就会丢失输入焦点，打断操作流程。
• 移动端适配注意安卓WebView的光标偏移问题：悬浮的变量选择面板定位要留出10-15px的安全边距，避免被输入法遮挡。

内容的提问来源于stack exchange，提问作者Karthick Jayachandran