使用while循环实现JavaScript查找替换功能时页面卡死是什么原因

• 核心问题是代码产生了死循环，占满浏览器JS主线程导致页面无响应：你在函数开头就把textarea的原始值赋值给了message变量，字符串是基础值类型，这个变量不会随DOM的value更新自动同步。while循环的判断条件是message.indexOf(find) != -1，但循环体内你只修改了DOM元素的value，始终没有更新message变量的值，只要初始文本存在匹配的查找内容，循环条件会永远成立，陷入无限执行。
• 额外隐患：就算你修复了变量同步问题，如果替换后的内容包含待查找的关键词（比如查找a，替换为aa），循环也会无限生成新的匹配项，再次触发死循环。同时字符串replace方法传入字符串作为第一个参数时，默认仅替换第一个匹配项，不符合全局替换的需求。

推荐直接用全局正则替换替代循环，更简洁也能避免上述问题，需要注意先转义用户输入的正则特殊字符，避免匹配异常：

function findText() {
  const findInput = document.getElementById('find').value.trim();
  const replaceInput = document.getElementById('replace').value;
  const messageEle = document.getElementById('message');
  // 空查找值直接返回，避免无效执行
  if (!findInput) return;
  // 转义正则特殊字符
  const escapedFind = findInput.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 全局替换所有匹配项
  messageEle.value = messageEle.value.replace(new RegExp(escapedFind, 'g'), replaceInput);
}

如果要保留循环实现，需要每次循环更新message变量，同时记录上次匹配位置避免重复匹配：

function findText() {
  let find = document.getElementById('find').value.trim();
  let replace = document.getElementById('replace').value;
  let message = document.getElementById('message').value;
  if (!find) return;
  let pos = 0;
  while ((pos = message.indexOf(find, pos)) !== -1) {
    message = message.slice(0, pos) + replace + message.slice(pos + find.length);
    // 跳过已替换的内容，避免替换内容包含查找词导致死循环
    pos += replace.length;
  }
  document.getElementById('message').value = message;
}

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