React中如何实现输入框动态替换字符串中的花括号占位变量？

你的问题核心是不该修改模板本身——你之前用replaceAll把占位符替换成输入值后，原始占位符就消失了，后续自然没法再匹配替换。正确的做法是始终保留原始模板字符串，每次输入变化时，基于原始模板重新替换所有变量的值。

具体实现步骤（React）： #

1. 保留原始模板：把带占位符的字符串作为常量或状态（不需要修改它）
2. 统一管理变量值：用一个对象状态存储所有变量的键值对，比如{ "1": "输入内容1", "2": "输入内容2" }
3. 动态生成输入框：遍历变量数组，每个输入框对应变量的key，更新时修改状态对象里的对应属性
4. 实时渲染最终文本：每次状态变化，基于原始模板批量替换所有占位符

代码示例： #

import { useState } from 'react';

function TemplateReplacer() {
  // 1. 原始模板，永远不修改它
  const originalTemplate = "我的名字是{{firstName}}，编号是{{1}}，爱好是{{2}}";
  // 变量数组，动态创建输入框的依据
  const variables = ["firstName", "1", "2"];
  
  // 2. 统一管理所有变量的输入值
  const [inputValues, setInputValues] = useState(() => {
    // 初始化状态，每个变量对应空字符串
    return variables.reduce((obj, key) => {
      obj[key] = "";
      return obj;
    }, {});
  });

  // 3. 输入框的onChange处理：更新对应变量的值
  const handleInputChange = (key, e) => {
    setInputValues(prev => ({
      ...prev,
      [key]: e.target.value
    }));
  };

  // 4. 基于原始模板生成最终文本
  const getFinalText = () => {
    // 用正则批量替换所有占位符
    return originalTemplate.replace(/{{(\w+)}}/g, (_, key) => {
      // 如果变量有值就替换，没值就保留原占位符
      return inputValues[key] || `{{${key}}}`;
    });
  };

  return (
    <div>
      {/* 动态生成输入框 */}
      {variables.map(key => (
        <div key={key} style={{ margin: '10px 0' }}>
          <label>变量{key}：</label>
          <input
            type="text"
            value={inputValues[key]}
            onChange={(e) => handleInputChange(key, e)}
            style={{ marginLeft: '8px' }}
          />
        </div>
      ))}
      {/* 渲染最终文本 */}
      <div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc' }}>
        <strong>结果：</strong>
        {getFinalText()}
      </div>
    </div>
  );
}

export default TemplateReplacer;

为什么这个方案可行： #

• 原始模板始终保留，不会被修改，占位符永远存在，每次输入变化都能重新匹配替换
• 用一个对象状态管理所有变量值，不需要为每个输入框单独维护状态，完美适配动态生成输入框的场景
• 正则替换的方式比逐个replaceAll更高效，还能自动处理未输入的变量（保留占位符）

内容的提问来源于stack exchange，提问作者Sk Kaushik