Why is this.substring(index) not working?

Question

Below is a custom String method from How do I replace a character at a particular index in JavaScript?

String.prototype.replaceAt = function(index, replacement) {
    return this.substring(0, index) + replacement + this.substring(index + replacement.length);
}

I didn't want the replacement to replace the proceeding characters so I changed it to

String.prototype.replaceAt = function(index, replacement) {
    return this.substring(0, index) + replacement + this.substring(index);
}

I was using this to replace the '#' with a '%23' because otherwise the browser doesn't understand the link at gives a 404 error (I am programming this on a localhost server). My fileNames array looks like

const fileNames = [
    ["template.html", "first.php", "second.php", "comments.php", "predefined.php", "strings.php", "concat.php", 
    "numbers.php", "constants.php", "quotes.php"],
    ["form.html", "handle_form #1.php", "handle_form #2.php", "handle_form #3.php"],
    [""],
    [""],
    [],
    [],
];

Then I loop through the 2-D array. Finally, I loop through each string in fileNames with another loop. If the following code is commented out it works fine but the task that the code accomplishes is not carried out.

        for (let k = 0; k < fileNames[i][j].length; k++) {
            if (fileNames[i][j][k] == '#') {
                fileNames[i][j] = fileNames[i][j].replaceAt(k, '%23');
            }
        }
    }
}

The problem is as soon as I change index + replacement.length to index, the page stops loading and a popup shows up saying the page is unresponsive. Why is this happening? How do I fix it?

Answer 1

The code is causing an infinite loop because your faulty version of replaceAt is merely inserting the desired substring before each # character. This means that the code, as it processes through the string, will always find another # a few characters further on, and thus the loop becomes infinite and blocks the browser.

I believe you mean to use this instead:

String.prototype.replaceAt = function(index, replacement) {
    return this.substring(0, index) + replacement + this.substring(index + 1);
}

(Note the + 1 - that's the only change!)

Answer 2

Your current logic is merely moving the # farther up the string, resulting in an infinite loop:

String.prototype.replaceAt = function(index, replacement) {
    return this.substring(0, index) + replacement + this.substring(index);
}
console.log('foo#bar'.replaceAt(3, 'baz'));

Instead of a custom replace function though, why not just use the built-in .replace? Use a global regular expression to match #s, and replace with '%23'. For example:

const fileNames = [
    ["template.html", "first.php", "second.php", "comments.php", "predefined.php", "strings.php", "concat.php", 
    "numbers.php", "constants.php", "quotes.php"],
    ["form.html", "handle_form #1.php", "handle_form #2.php", "handle_form #3.php"],
    [""],
    [""],
    [],
    [],
];
const fixedFileNames = fileNames.map((arr) => (
  arr.map((str) => str.replace(/#/g, '%23'))
));
console.log(fixedFileNames);

Array methods are generally a lot nicer to work with than for loops - no manual iteration, better abstraction.

Answer 3

Hmm, not a huge fan of changing the string prototype like that.

If your aim is to encode the hash character, why not use:

encodeURIComponent("#")

Output: "%23"

Answer 4

Couple general things, then the solution.

1. You should your browser's developer tools to see what the actual error is, and post that as well.
2. It's generally frowned upon to tack things onto the in-built object types. I recommend using a standalone function.

Actual solution: the code you posted is an insertion, not a replacement: it leaves in the hash. Then, because you are leaving it it, the loop "finds" it again and runs forever. Try this:

String.prototype.replaceAt = function(index, replacement) {
    return this.substring(0, index) + replacement + this.substring(index + numberOfCharsToOmit);
}

And add in a number appropriately.