html javascript 文本不会替换

Question

我想在我的文本框中查找并替换文本。

这是我的脚本

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

这是我的 html 代码

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

预期结果：

然而，这就是我得到的：

虽然它说“替换了 3 个单词”，但文本框中的文本没有被替换。

Answer 1

在您的脚本中，您运行了没有正则表达式的str.replace函数。 所以它只会替换第一个匹配项。

您已定义numreplace regex 但尚未使用它。

因此，要使其工作，它需要的地方str.replace后numreplace变量的定义和使用该正则表达式中str.replace功能如下。

 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 文本不会替换

问题描述

1 个解决方案

解决方案1
1 2020-10-26 04:49:09

html javascript 文本不会替换

问题描述

1 个解决方案

解决方案1 1 2020-10-26 04:49:09

解决方案1
1 2020-10-26 04:49:09