如何用循环而非正则实现字符串批量替换？修复循环逻辑问题

Hey there! Let's get that replaceAll function working properly. Your current loop logic has a couple of key issues that are preventing it from replacing all matches:

• You're not updating the userText variable after each replacement, so you keep working with the original string every time.
• The loop condition r < userText.indexOf(search) doesn't make sense for iterating through matches—it checks the position of the first match against the loop counter, which won't cover all instances.

Here's how to rewrite the logic to find and replace every occurrence, including handling case sensitivity:

Step-by-Step Explanation #

1. Start with the original text and keep track of our current position in the string.
2. Loop until we can't find the search term anymore: Use indexOf (or a case-insensitive variant) to locate the next match.
3. Build the new string incrementally: Each time we find a match, we take the part before the match, add the replacement text, then append the part after the match.
4. Adjust our position to start searching after the end of the last replacement (to avoid infinite loops if the replacement text contains the search term).

Corrected Code #

First, let's update the JavaScript functions:

'use strict'
function main() {
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('replace').addEventListener('click', replace);
        document.getElementById('replaceAll').addEventListener('click', replaceAll);
    });
}

function replace(evnt) {
    evnt.preventDefault()
    let userText = document.getElementById('input').value;
    let search = document.getElementById('search').value;
    let replaceText = document.getElementById('replaceText').value;
    let caseSensitive = document.getElementById('case').checked;

    // Handle case sensitivity for single replace
    let searchTerm = caseSensitive ? search : search.toLowerCase();
    let textToCheck = caseSensitive ? userText : userText.toLowerCase();
    let matchIndex = textToCheck.indexOf(searchTerm);

    if (matchIndex !== -1) {
        // Build the replaced string
        userText = userText.slice(0, matchIndex) + replaceText + userText.slice(matchIndex + search.length);
    }

    document.getElementById('input').value = userText;
}

function replaceAll(evnt) {
    evnt.preventDefault();
    let userText = document.getElementById('input').value;
    let search = document.getElementById('search').value;
    let replaceText = document.getElementById('replaceText').value;
    let caseSensitive = document.getElementById('case').checked;

    // Edge case: if search term is empty, do nothing
    if (!search) return;

    let currentText = userText;
    let searchTerm = caseSensitive ? search : search.toLowerCase();
    let matchIndex;

    do {
        // Find the next match (case-sensitive or not)
        let textToCheck = caseSensitive ? currentText : currentText.toLowerCase();
        matchIndex = textToCheck.indexOf(searchTerm);

        if (matchIndex !== -1) {
            // Replace the match and update currentText
            currentText = currentText.slice(0, matchIndex) + replaceText + currentText.slice(matchIndex + search.length);
        }
    } while (matchIndex !== -1);

    document.getElementById('input').value = currentText;
}

// Initialize the main function
main();

Then, fix a small typo in your HTML (the textarea has row instead of rows):

<form id="form">
    <div>
        <textarea id="input" rows="10" cols="50" placeholder="Enter text here"></textarea>
    </div>
    <div>
        <input type="text" id="search" name="search" placeholder="Search term">
        <input type="text" id="replaceText" name="replacebox" placeholder="Replacement text">
    </div>
    <div>
        <input type="checkbox" id="case" name="case sensitivity" />
        <label for="case">Case sensitivity</label>
    </div>
    <div>
        <button type="submit" id="replace">Replace</button>
    </div>
    <div>
        <button type="submit" id="replaceAll">Replace all</button>
    </div>
</form>

Key Improvements #

• Proper iteration: The do...while loop keeps running until no more matches are found.
• Case sensitivity handling: Both replace and replaceAll now respect the checkbox setting.
• Avoid infinite loops: By updating currentText each time and searching from the start of the new string, we ensure we don't reprocess the same match (even if the replacement text includes the search term).
• Edge case handling: If the search term is empty, the function exits early to avoid unexpected behavior.

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