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