HTML中JavaScript实现用户输入自动插入字符串中间的问题求助

我来帮你搞定这个问题——你遇到的核心问题是直接在HTML属性里用JavaScript模板字符串根本行不通，浏览器会把${firstname}当成纯文本解析，而且原代码也没有处理姓名替换的逻辑，所以才会出现模板字符串无法正常显示的情况。下面是具体的可行解决方案：

步骤1：重构HTML结构，用自定义属性存储语句模板 #

把原来写在checkbox value里的带占位符的内容，移到data-template自定义属性里（用{name}作为姓名占位符，避免和JS模板字符串语法冲突），结构更清晰也更易维护：

<form>
  Enter Your First Name <br>
  <input type="text" id="firstname" name="firstname" oninput="addNameToCommentBox(this)"><br><br>
  
  Opening Sentence <br>
  <input type="checkbox" onclick="addToCommentBox(this);" name="grade" data-template="statement1. statement1. {name} statement1. statement1.">
  Statement1. identifier user read on page<br>
  
  Second Sentence <br>
  <input type="checkbox" onclick="addToCommentBox(this);" name="grade" data-template="statement2. statement2. {name} statement2. statement2.">
  Statement2. identifier user read on page<br><br>
  
  Resulting Block<br>
  <textarea id="comment" rows="10" cols="80"></textarea><br>
</form>

这里把onblur改成了oninput，能让文本框在用户输入时实时更新，体验更好。

步骤2：修改JavaScript逻辑，实现姓名替换与动态更新 #

更新JS函数，加入占位符替换逻辑，同时用集合记录已选中的模板，避免取消选中时出现匹配错误：

// 存储已选中的语句模板，方便后续准确移除
const selectedTemplates = new Set();

function addNameToCommentBox() {
  // 用户修改姓名时，重新生成所有已选中的语句
  updateCommentBox();
}

function addToCommentBox(checkboxElement) {
  const template = checkboxElement.dataset.template;
  if (checkboxElement.checked) {
    selectedTemplates.add(template);
  } else {
    selectedTemplates.delete(template);
  }
  // 同步更新文本框内容
  updateCommentBox();
}

function updateCommentBox() {
  const commentBox = document.getElementById('comment');
  const userName = document.getElementById('firstname').value.trim();
  // 替换每个模板里的占位符，拼接成最终文本
  const finalContent = Array.from(selectedTemplates)
    .map(template => template.replace('{name}', userName || '[请输入姓名]'))
    .join(' ');
  commentBox.value = finalContent;
}

代码逻辑说明： #

• selectedTemplates集合用来记录用户选中的模板，确保添加/移除操作准确无误
• updateCommentBox是核心函数：获取当前用户姓名，遍历所有选中的模板，把{name}替换成真实姓名（如果用户没输入，就显示[请输入姓名]兜底），最后把处理后的内容赋值给文本框
• 用户修改姓名或勾选/取消勾选语句时，都会触发内容更新，保证文本框始终是最新的正确内容

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