html javascript text will not replace

Question

I would like to find and replace the text in my textbox.

this is my script

<script>

function findnReplace() {
           
        var str = document.getElementById("source").value;
        var find = document.getElementById("find").value;
        var replace = document.getElementById("replace").value;
        var resultString = str.replace(find, replace);
        var numreplace = new RegExp(find, 'g');

        document.getElementById("source").innerHTML = resultString;

        //find the number of words found and replaced
            var num = str.match(numreplace).length;

            if (num == 0) {
              var no = "No words are replaced.";
              document.getElementById("num").innerHTML = no;
            } else {
              var n = num + " word(s) replaced.";
              document.getElementById("num").innerHTML = n;
            }
      }
</script>

and here is my html code

<html>
<body>
<table>
<textarea name="text" id="source" rows="3"  cols="20" required>Hello Testing
                </textarea><br><br>
<tr>
                        <td>Find:</td>
                        <td>
                            <input type="text" id="find" name="find" onkeyup="replaceNum()" size="30">
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Replace:</td>
                        <td>
                            <input type="text" id="replace" name="replace" onkeyup="replaceNum()" size="30">
                        </td>
                    </tr>
    
                </table>    
                
                <input id="findnReplaceButton" type="button" value="Find & Replace" 
                onclick="findnReplace()" title="Fill in both textbox"/>

                <span id="num"></span>
</table>
</body>
</html>

expected result:

however, this is what i am getting:

ALTHOUGH it says "3words replaced" but the text in the textbox didnt get replaced.

textarea's have value, not innerHTML

epascarello
– epascarello

2020-10-26 04:39:19 +00:00
Commented Oct 26, 2020 at 4:39 — epascarello
– epascarello, Commented Oct 26, 2020 at 4:39
@epascarello oh!! i got it! thank you for your help!

user14482437
– user14482437

2020-10-26 04:41:51 +00:00
Commented Oct 26, 2020 at 4:41 — user14482437
– user14482437, Commented Oct 26, 2020 at 4:41

Derek Wang · Accepted Answer · 2020-10-26 04:49:09Z

On your script, you have run str.replace function without regex. So it will replace the first match only.

You have defined numreplace regex but have not used it.

So to make it work, it is needed to place str.replace after numreplace variable definition and use that regex inside str.replace function as follows.

function findnReplace() {
  var str = document.getElementById("source").value;
  var find = document.getElementById("find").value;
  var replace = document.getElementById("replace").value;
  var numreplace = new RegExp(find, 'g');
  var resultString = str.replace(numreplace, replace);

  document.getElementById("source").innerHTML = resultString;

  //find the number of words found and replaced
  var num = str.match(numreplace).length;

  if (num == 0) {
    var no = "No words are replaced.";
    document.getElementById("num").innerHTML = no;
  } else {
    var n = num + " word(s) replaced.";
    document.getElementById("num").innerHTML = n;
  }
}

<table>
  <textarea name="text" id="source" rows="3" cols="20" required>Hi Hi Hi Hi Testing</textarea><br><br>
  <tr>
    <td>Find:</td>
    <td>
      <input type="text" id="find" name="find" size="30">
    </td>
  </tr>

  <tr>
    <td>Replace:</td>
    <td>
      <input type="text" id="replace" name="replace" size="30">
    </td>
  </tr>

</table>

<input id="findnReplaceButton" type="button" value="Find & Replace" onclick="findnReplace()"
  title="Fill in both textbox" />

<span id="num"></span>
</table>

Collectives™ on Stack Overflow

html javascript text will not replace

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related