我找到了一种无需使用Regex即可进行字符串搜索和替换的方法,但是当我要替换多个实例时,它一次又一次而不是同时替换所有实例。如何使循环起作用?
'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>
输入
for(let r = 0; r < userText.indexOf(search);r++) {
document.getElementById('input').value = userText.replace(search, replaceText);
}
[在每次迭代中,您都使用userText
字符串并替换其中的一个子字符串。您不会从先前的迭代中获取替换的字符串;您正在使用original字符串,因此最后最多只能进行一次替换。
而不是重新分配变量,也许是userText
,然后在循环完成后分配给输入:
for(let r = 0; r < userText.indexOf(search);r++) {
userText = userText.replace(search, replaceText);
}
document.getElementById('input').value = userText;
也可以使用.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>