JavaScript字符串替换问题：如何将地址字段中的street替换为Street

问题排查 #

你当前代码的核心问题出在street单词的替换逻辑上：

• 仅能匹配替换全小写的street：你用toLowerCase().includes("street")可以识别到任意大小写格式的street单词，但后续的replace("street", "Street")只能匹配替换全小写的内容，如果用户输入的是STREET、sTreEt这类大小写混合的内容，就会出现识别到了但是替换失败的问题
• 逻辑错误：原代码在识别到包含street时返回streetIncluded（布尔值true），虽然最终结果符合要求但逻辑冗余，且如果后续修改参数容易出问题，直接统一返回true即可
• 额外小问题：页面上两个按钮的id都是Button1，id重复不符合HTML规范，建议修改为不同值

修复代码 #

将CheckEntries方法中最后的地址校验替换部分修改为如下内容即可：

// 替换原来的street相关校验逻辑
if (streetaddress.toLowerCase().includes("street")) {
    // 用不区分大小写的正则匹配所有street，替换为Street，加g可以替换所有匹配项，不需要可以去掉
    streetaddress = streetaddress.replace(/street/gi, "Street");
}
// 无论是否包含street都返回true，因为这个字段不要求必须有street
return true;

修改后完整代码 #

<body>
    Name: <input id="NameTextBox" type="text" /> FirstName LastName with a space between<br />
    Street Address: <input id="StreetAddressTextBox" type="text" /> <br />
    City: <input id="CityTextBox" type="text" /> <br />
    State: <input id="StateTextBox" type="text" /> <br />
    Zip: <input id="ZipTextBox" type="text" /> <br />
    <input id="ValidateBtn" type="button" value="Validate Entries" onclick="ValidateandDisplay()" />
    <div id="AddressDiv">If entered correctly, your address will display here.</div>
    
    <input id="SplitBtn" type="button" value="Split a String" onclick="SplitThis()" />
    <script>

        //need to initialize to empty strings
        var enteredname = "";
        var streetaddress = "";
        var city = "";
        var state = "";
        var zip = "";

        function ValidateandDisplay() {
            enteredname = document.getElementById("NameTextBox").value;
            streetaddress = document.getElementById("StreetAddressTextBox").value;
            city = document.getElementById("CityTextBox").value;
            state = document.getElementById("StateTextBox").value;
            zip = document.getElementById("ZipTextBox").value;

            var isValid = CheckEntries(); 
            if (isValid) {
                var correctentries = enteredname + "<br/>" +
                    streetaddress + "<br/>" + city + ", " + state + " " + zip;
                document.getElementById("AddressDiv").innerHTML = correctentries;
            }
            
        }

        function CheckEntries() {
            if (enteredname[0] == ' ')
            {
                alert("First position in name field can not be a space.");
                return false;
            }
            if (enteredname.indexOf(" ") == -1)
            {
                alert("no spaces found in entry.");
                return false;
            }
            if (enteredname.toLowerCase().indexOf("miller") == -1)
            {
                alert("miller is not in name field.");
                return false;
            }
            if (state.length != 2)
            {
                alert("State field must be only two characters long.");
                return false;
            }
            if (zip[0] != '4' || zip[1] != '5')
            {
                alert("Zip field must start with 45.");
                return false;
            }
            if (streetaddress.toLowerCase().includes("street")) {
                streetaddress = streetaddress.replace(/street/gi, "Street");
            }
            return true;
        }

    </script>
</body>

内容的提问来源于stack exchange，提问作者jeantaylor2021