How do I properly count the amount of replaced strings in Javascript. my increment function is in the replacement part of replace function bellow gives me a "0". i am not sure if the problem lies with the function or the way i called it. thanks in advance
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
<script>
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=(inp.replace(regexp,rv,function(x){count+=1;return"1"}))
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
</script>
</body>
</html>
you are using replace function in wrong way . there is only two arguments allowed for this
one = search term
two = string or function
if you are using function for replace value then you have to return whatever value you wanted to replace into that function and thats it
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=inp.replace(regexp,x => {
count++;
return rv;
})
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
</body>
</html>This will work for you. Cheers :)
function newrep() {
let temp = document.getElementById("message").value;
var fid = document.getElementById("find").value;
var regexp = new RegExp(fid, "gi");
var rv = document.getElementById("replace").value;
var inp = document.getElementById("message").value;
var count = 0;
// Additional condition, when find is empty
if (!fid) {
document.getElementById("ChCtr").innerHTML = count;
return;
}
// corrected your useage of replace function
let str2 = inp.replace(regexp, function () {
count += 1;
return rv;
});
update(str2, count);
}
function update(msg, count) {
document.getElementById("message").value = msg;
document.getElementById("ChCtr").innerHTML = count;
}<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br /><br />
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br /><br />
Replace:<br />
<input type="text" id="replace" name="replace" size="30"><br />
<br /><br />
<button onclick="newrep()">Find and Replace</button>
<br /><br />
</main>
</body>
</html>