基于正则表达式的单输入框查找替换功能实现遇问题求助

算力阿峰

2026-7-21

文本替换工具修复方案

你的代码存在几处关键问题导致功能失效，以下是问题分析和修正后的实现：

问题点

未获取输入框的实际输入值，仅拿到了DOM元素本身
String.replace()方法使用错误，直接传入用户输入的字符串无法被解析为正则表达式和替换目标
替换后的文本未写回textarea，无法看到执行结果

修正后的代码

HTML（保持原有结构即可）

<textarea id="string-text"></textarea>
<br><br>

<input id="string-letter" type="text">
<br><br>

<button id="string-btn" onclick="GetResult();">Change!</button>

JavaScript

function GetResult() {
  // 获取页面元素和输入内容
  const textArea = document.getElementById('string-text');
  const inputContent = document.getElementById('string-letter').value.trim();
  
  // 解析用户输入的格式：匹配类似/red/g,'green'的结构
  const formatMatch = inputContent.match(/\/(.*)\/([gimuy]*),['"](.*)['"]/);
  if (!formatMatch) {
    alert('请输入正确格式，示例：/red/g,"green"');
    return;
  }

  // 提取正则规则、修饰符和替换文本
  const regexPattern = formatMatch[1];
  const regexFlags = formatMatch[2];
  const replaceText = formatMatch[3];

  // 创建正则表达式并执行替换
  const regex = new RegExp(regexPattern, regexFlags);
  const replacedText = textArea.value.replace(regex, replaceText);

  // 将替换结果写回textarea
  textArea.value = replacedText;
}