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.

Answer 1

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>

html javascript text will not replace

Question

1 answers

solution1
1 2020-10-26 04:49:09

html javascript text will not replace

Question

1 answers

solution1 1 2020-10-26 04:49:09

solution1
1 2020-10-26 04:49:09