Javascript 使用 while 循环查找并替换 function

Question

我有这个简单的 function 来查找和替换我的 textarea消息中的文本。 用户将能够在文本区域中键入内容，还能够从他们刚刚输入的文本区域中查找和替换单词。 目前我正在尝试使用 while 循环来替换在用户键入的文本区域中找到的多个相同单词。但每次我运行它时，它似乎冻结了整个 html 页面知道为什么会这样吗？

查找和替换是用户输入他们想要查找和替换的单词的文本框，用户也可以输入多个单词进行替换。

function findText() {
  let find = document.getElementById('find').value;
  let replace = document.getElementById('replace').value;
  let message = document.getElementById('message').value;
  var lmao = message.indexOf(find);

  while (message.indexOf(find) != -1) {
    document.getElementById("message").value = message.replace(find, replace);
  }
}

Answer 1

用replaceAll替换while循环。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

 function findText() { let find = document.getElementById('find').value; let replace = document.getElementById('replace').value; let message = document.getElementById('message').value; var lmao = message.indexOf(find); document.getElementById("message").value = message.replaceAll(find, replace); }

 <div>Find <input id="find" value="find" /></div> <div>Replace <input id="replace" value="replace" /></div> <div> <textarea id="message" style="height: 100px">you can find and replace every words just by.replaceAll, example: find 1 find 2 find 3</textarea> </div> <div> <button onclick="findText()">Submit</button> </div>

Answer 2

只是在其他答案中添加，您可以使用g进行全局搜索并替换您找到该词的位置。 在此处阅读有关正则表达式和 //g 的更多信息

您也可以像这样使用i和g让搜索case-insensitivity ：
message.replace(/find/g, replace)
这样它也将取代Find finD FIND

而不是使用while你可以使用if循环

 function findText() { let find = document.getElementById('find').value; let replace = document.getElementById('replace').value; let message = document.getElementById('message').value; var lmao = message.indexOf(find); if(message.indexOf(find).= -1) { document.getElementById("message").value = message,replace(/find/g; replace); } }

 <div>Find <input id="find" value="find" /></div> <div>Replace <input id="replace" value="replace" /></div> <div> <textarea id="message" style="height: 100px">you can find and replace every words just by.replaceAll, example: find 1 find 2 find 3</textarea> </div> <div> <button onclick="findText()">Submit</button> </div>

Answer 3

问题在于您的while条件。 当所有输入字段为空时，您的while条件为true 。 所以在 while 条件内，输入值再次更新为空字符串，这使得循环成为无限循环。 这就是为什么你的用户界面坏了。

问题场景

 console.log(("").indexOf("");== -1);

要解决此问题，您必须确保您的find值和replace值不相同。 否则，又会陷入死循环。

固定液

 function findText() { let find = document.getElementById('find').value; let replace = document.getElementById('replace').value; let message = document.getElementById('message'); while (find.== replace && message.value.indexOf(find).= -1) { message.value = message,value;replace(find, replace); } }

 <input type="text" id="find"> <input type="text" id="replace"> <textarea name="" id="message" cols="30" rows="10"></textarea> <button onclick="findText()">Check</button>