[英]Search and replacing strings without using Regex but loops instead, how can I replace more than one word at a time?
I found a way to do string search and replace without using Regex but when I want to replace more than one instance it does it one out at time instead of all instances at the same time.我找到了一种不使用正则表达式进行字符串搜索和替换的方法,但是当我想替换多个实例时,它会一次执行一次,而不是同时执行所有实例。 How can I get the loop to work?我怎样才能让循环工作?
'use strict' function main() { document.addEventListener('DOMContentLoaded', function() { document.getElementById('replace').addEventListener('click', replace); document.getElementById('replaceAll').addEventListener('click', replaceAll); }); } function replace(evnt) { evnt.preventDefault() let userText = document.getElementById('input').value; let search = document.getElementById('search').value; let replaceText = document.getElementById('replaceText').value; let caseSensitive = document.getElementById('case').checked; document.getElementById('input').value = userText.replace(search, replaceText); } function replaceAll(evnt) { evnt.preventDefault(); let userText = document.getElementById('input').value; let search = document.getElementById('search').value; let replaceText = document.getElementById('replaceText').value; for (let r = 0; r < userText.indexOf(search); r++) { document.getElementById('input').value = userText.replace(search, replaceText); console.log(r); } }
<form id="form"> <div> <textarea id="input" row="10" cols="50" placeholder="Enter text here"></textarea> </div> <div> <input type="text" id="search" name="search"> <input type="text" id="replaceText" name="replacebox"> </div> <div> <input type="checkbox" id="case" name="case sensitivity" /> <label for="uppercase">case sensitivity</label> </div> <div> <button type="submit" id="replace">Replace</button> </div> <div> <button type="submit" id="replaceAll">Replace all</button> </div> </form>
In在
for(let r = 0; r < userText.indexOf(search);r++) {
document.getElementById('input').value = userText.replace(search, replaceText);
}
On every iteration, you're taking the userText
string and replacing one substring inside it.在每次迭代中,您都使用userText
字符串并替换其中的一个子字符串。 You're not taking the replaced string from the prior iteration;您没有从先前的迭代中获取替换的字符串; you're taking the original string, so in the end, no more than one replacement, at most, will have been made.您正在使用原始字符串,因此最终最多不会进行一次替换。
Reassign a variable instead, perhaps userText
, then assign to the input after the loop is done:重新分配一个变量,可能是userText
,然后在循环完成后分配给输入:
for(let r = 0; r < userText.indexOf(search);r++) {
userText = userText.replace(search, replaceText);
}
document.getElementById('input').value = userText;
Could also use .includes
, it's more intuitive:也可以使用.includes
,它更直观:
while (userText.includes(search)) {
userText = userText.replace(search, replaceText);
}
'use strict' function main() { document.addEventListener('DOMContentLoaded', function() { document.getElementById('replace').addEventListener('click', replace); document.getElementById('replaceAll').addEventListener('click', replaceAll); }); } function replace(evnt) { evnt.preventDefault() let userText = document.getElementById('input').value; let search = document.getElementById('search').value; let replaceText = document.getElementById('replaceText').value; let caseSensitive = document.getElementById('case').checked; document.getElementById('input').value = userText.replace(search, replaceText); } function replaceAll(evnt) { evnt.preventDefault(); let userText = document.getElementById('input').value; let replaceText = document.getElementById('replaceText').value; while (userText.includes(search.value)) { userText = userText.replace(search.value, replaceText); } input.value = userText; } const [repButton, repAllButton] = document.querySelectorAll('button'); repButton.onclick = replace; repAllButton.onclick = replaceAll;
<form id="form"> <div> <textarea id="input" row="10" cols="50" placeholder="Enter text here">abcabc</textarea> </div> <div> <input type="text" id="search" name="search" value="abc"> <input type="text" id="replaceText" name="replacebox" value="123"> </div> <div> <input type="checkbox" id="case" name="case sensitivity" /> <label for="uppercase">case sensitivity</label> </div> <div> <button type="submit" id="replace">Replace</button> </div> <div> <button type="submit" id="replaceAll">Replace all</button> </div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.