Q: how to count number of replaced strings in javascript 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>


A: 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>



A: 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>


