[英]Javascript find and replace function using while loop
I have this simple function to find and replace text in my textarea message .我有这个简单的 function 来查找和替换我的 textarea消息中的文本。 User will be able to type into the textarea and also be able to find and replace words from the text area they just entered.
用户将能够在文本区域中键入内容,还能够从他们刚刚输入的文本区域中查找和替换单词。 Currently I'm trying to use a while loop to replace multiple same words found in the textarea that the user keyed in. But every time I run it it seems to freeze the entire html page any idea why this is happening?
目前我正在尝试使用 while 循环来替换在用户键入的文本区域中找到的多个相同单词。但每次我运行它时,它似乎冻结了整个 html 页面知道为什么会这样吗?
find and replace are textbox for user to key in the word they want to find and replace the user is able to key in multiple words to replace as well.查找和替换是用户输入他们想要查找和替换的单词的文本框,用户也可以输入多个单词进行替换。
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);
}
}
Replace while
loop with a replaceAll
.用
replaceAll
替换while
循环。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll 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>
Just a addition in other answer you can use g
for global search and to replace where you find that word.只是在其他答案中添加,您可以使用
g
进行全局搜索并替换您找到该词的位置。 Read more about regex and //g here 在此处阅读有关正则表达式和 //g 的更多信息
Also you can let the search
case-insensitivity
usingi
along withg
like this:您也可以像这样使用
i
和g
让搜索case-insensitivity
:
message.replace(/find/g, replace)
This way it will also replace Find finD FIND这样它也将取代Find finD FIND
And instead of using while
you can use if
loop而不是使用
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>
The issue is with your while
condition.问题在于您的
while
条件。 When all input fields are empty your while
condition is true
.当所有输入字段为空时,您的
while
条件为true
。 So inside the while condition the input value keeps on updating to empty string again, which makes loop an infinite loop.所以在 while 条件内,输入值再次更新为空字符串,这使得循环成为无限循环。 Thats why your ui is breaking.
这就是为什么你的用户界面坏了。
Issue Scenario问题场景
console.log(("").indexOf("");== -1);
To fix this, you have to make sure that your find
and replace
values are not same.要解决此问题,您必须确保您的
find
值和replace
值不相同。 Or else, it will be an infinite loop again.否则,又会陷入死循环。
Fixed Solution固定液
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.