javascript - 不使用 Regex 而是循环搜索和替换字符串,如何一次替换多个单词?
问题描述
我找到了一种在不使用 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
字符串并替换其中的一个子字符串。您没有从先前的迭代中获取替换的字符串;您正在使用原始字符串,因此最后最多只能进行一次替换。
重新分配一个变量,也许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>
推荐阅读
- php - 在服务器上上传 ci 项目的问题
- c# - 如何从 Specflow 功能更新 Azure Devops 测试用例结果
- c# - 如何像rails-pry一样给C#或F#添加断点,然后使用命令调试?
- c++ - 为什么我的数组值会更新为随机值?
- javascript - ESLint 不会在 ES6 类中抛出基本错误
- react-native - React Navigation 5 使用类组件访问导航
- javascript - JQGrid - 弹出编辑/添加按钮
- laravel - 在 iFrame 中获取使用我的 URL 的域名
- android - OpenId AppAuth 未从跨应用程序的自定义选项卡返回结果
- javascript - 如何在科尔多瓦应用程序中的选择标签选项中显示图像?