基于下拉框与输入框动态替换textarea代码块内容的问题

现存问题 #

• 切换第二个下拉框选项时，无法再次替换已修改过的内容，必须刷新页面才能重新操作
• 输入框和第二个下拉框的修改会互相覆盖，三者（代码块选择、下拉框替换、输入框替换）无法同步动态更新

核心解决思路 #

不要直接修改textarea里的现有内容，而是统一保存所有用户的选择/输入状态，每次任何控件变化时，都从原始代码模板出发，应用所有当前的修改参数，重新生成最终内容并渲染到textarea中。这种方式能彻底避免原始内容丢失、修改互相覆盖的问题。

完整实现代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myfirstselect[]" class="my-select">
  <option selected disabled="disabled">Choose your code block</option>
  <option value="first-option">first code block</option>
  <option value="second-option">second code block</option>
</select>

<select class="my-other-select">
  <option selected disabled="disabled" value="">Choose</option>
  <option value="2345">1</option>
  <option value="8990">2</option>
</select>
<input type="text" class="input" placeholder="Object">

<textarea id="myTextarea" style="width:250px;height:100px"></textarea>

JavaScript部分

// 原始代码模板集合
const templates = {
  "first-option": '<p>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et e magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi <a href="https://google.com/dolor/amet?FN=Object">first link</a>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et e magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> ',
  "second-option": '<p>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididuntrud exercitation ullamco laboris nisi <a href="https://google.com/dolor/amet?FN=Object">second link</a>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et e magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>'
};

// 统一保存用户的操作状态
const userState = {
  selectedTemplate: "",
  otherSelectValue: "",
  otherSelectText: "",
  inputValue: ""
};

const textarea = $("#myTextarea");

// 统一渲染函数：根据当前状态生成最终内容
function renderContent() {
  if (!userState.selectedTemplate) return;
  
  let content = templates[userState.selectedTemplate];
  
  // 应用第二个下拉框的替换规则
  if (userState.otherSelectValue) {
    content = content.replace(/dolor/g, userState.otherSelectValue)
                     .replace(/amet/g, userState.otherSelectText);
  }
  
  // 应用输入框的替换规则
  if (userState.inputValue) {
    content = content.replace(/Object/g, userState.inputValue);
  }
  
  textarea.html(content);
}

// 第一个下拉框切换事件
$('.my-select').on('change', function() {
  userState.selectedTemplate = $(this).val();
  // 切换模板时重置其他控件状态
  userState.otherSelectValue = "";
  userState.otherSelectText = "";
  userState.inputValue = "";
  $(".my-other-select").val("");
  $(".input").val("");
  renderContent();
});

// 第二个下拉框切换事件
$('.my-other-select').on('change', function() {
  userState.otherSelectValue = $(this).val();
  userState.otherSelectText = $(this).find("option:selected").text();
  renderContent();
});

// 输入框内容变化事件
$(".input").on('input', function () {
  userState.inputValue = $(this).val();
  renderContent();
});

关键说明 #

1. 状态统一管理：用userState对象集中保存所有用户操作数据，所有控件的变化都先更新这个状态，再触发渲染
2. 基于原始模板重渲染：每次更新都从最原始的代码模板开始，叠加所有当前的替换规则，确保内容始终准确，不会因为多次修改导致原始标记丢失
3. 模板切换重置：切换第一个下拉框时自动清空其他控件的状态和内容，避免旧数据干扰新模板的渲染

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