HTML中实现文本查找替换功能无响应无报错如何解决？

错误原因 #

• 错误使用innerHTML获取表单控件的值：<input>和<textarea>属于表单输入控件，用户输入的内容存储在value属性中，innerHTML只能获取到标签初始渲染时的内部文本，无法读取用户实时输入的内容，这是导致功能无响应的核心原因。
• 原生replace方法默认仅替换第一个匹配的字符串，如果需要全局替换所有匹配内容需要配合正则表达式使用。
• 未对查找关键词做正则特殊字符转义处理，如果用户输入包含.*+?^等正则保留字符时，会出现匹配异常。

修正后的JavaScript代码 #

function findAndReplace() {
  // 使用value属性读取/写入表单控件内容
  const find = document.getElementById("find").value.trim();
  const replace = document.getElementById("replace").value;
  const textArea = document.getElementById("message");
  const originText = textArea.value;

  // 查找关键词为空时直接跳出，避免无意义替换
  if (!find) return;

  // 转义正则特殊字符，避免匹配异常
  const escapedFind = find.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 加g标志实现全局替换所有匹配内容
  const newText = originText.replace(new RegExp(escapedFind, 'g'), replace);
  
  textArea.value = newText;
}

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