如何修改Replace all功能代码，避免无实际替换时误报次数？

概述 #

我开发了一个带有“Replace all”功能的基础文本编辑器，但遇到一个问题：即使文本未发生变化，输出仍显示已完成替换。以下是我的简化代码：

JS 代码 #

const textarea = document.getElementById('textarea');
const searchInput = document.getElementById('search');
const replaceInput = document.getElementById('replace');
const output = document.getElementById('output');
const replaceButton = document.getElementById('replaceAll');

replaceButton.addEventListener('click', () => {
  const searchValue = searchInput.value;
  const replaceValue = replaceInput.value;

  if (!searchValue) {
    output.textContent = 'No search term';
    return;
  }

  const regex = new RegExp(searchValue, 'g');
  const matches = textarea.value.match(regex);

  if (matches) {
    const count = matches.length;
    textarea.value = textarea.value.replace(regex, replaceValue);
    output.textContent = `${count} replacement${count === 1 ? '' : 's'}`;
  } else {
    output.textContent = 'No matches';
  }
});

CSS 代码 #

textarea {
  width: 100%;
  height: 100px;
}

#output {
  color: #666;
}

HTML 代码 #

<textarea id="textarea">apple orange apple orange</textarea>
<input type="text" id="search" placeholder="Search">
<input type="text" id="replace" placeholder="Replace">
<button id="replaceAll">Replace all</button>
<div id="output"></div>

边缘情况 #

非正则搜索 #

• 文本: apple orange apple orange
• 搜索词: apple
• 替换词: apple
• 预期输出: "No replacement" 或 "2 identical replacements"
• 当前输出: "2 replacements"

正则搜索 #

• 文本: 9/1/2021, 3/1/2022
• 搜索词: (\d*)/\d*/(\d{4})
• 替换词: $1/1/$2
• 预期输出: "No replacement" 或 "2 identical replacements"
• 当前输出: "2 replacements"

求助 #

请问如何修改代码以正确处理这些边缘情况，在替换操作后文本未发生变化时显示"No replacement"？

核心思路是先生成替换后的文本，对比原文本是否有变化，再决定输出内容。修改后的JS代码如下：

const textarea = document.getElementById('textarea');
const searchInput = document.getElementById('search');
const replaceInput = document.getElementById('replace');
const output = document.getElementById('output');
const replaceButton = document.getElementById('replaceAll');

replaceButton.addEventListener('click', () => {
  const searchValue = searchInput.value;
  const replaceValue = replaceInput.value;

  if (!searchValue) {
    output.textContent = 'No search term';
    return;
  }

  const regex = new RegExp(searchValue, 'g');
  const originalText = textarea.value;
  const matches = originalText.match(regex);

  if (matches) {
    const count = matches.length;
    const newText = originalText.replace(regex, replaceValue);
    
    if (newText === originalText) {
      // 文本未变化，可根据需求选择提示文案
      output.textContent = `${count} identical replacements`;
      // 也可替换为 output.textContent = 'No replacement';
    } else {
      textarea.value = newText;
      output.textContent = `${count} replacement${count === 1 ? '' : 's'}`;
    }
  } else {
    output.textContent = 'No matches';
  }
});

关键改进点 #

• 新增originalText保存替换前的文本，避免替换后无法对比原内容
• 先计算newText再判断是否有变化，确保对比逻辑准确
• 针对文本未变化的场景，输出符合预期的提示信息

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