One index is dependent on another index in Java Script

I'm making a function for a moving window design self-paced reading experiment where a sentence is input and a function replaces all letters with dashes. The participant then clicks through the sentences, uncovering the first word/region; upon the next click, the second word/region is uncovered and the previous word/region is covered by dashes again and so on until the end of the sentence. Below is my code for a replaceWithdash function in order to achieve this.

var _pj;
function replaceWithdash(sentenceList, currentWordNumber) {
var index, result, word;
result = "";
index = 0;
while ((index < sentenceList.length)) {
    word = sentenceList[index];
    if ((index !== currentWordNumber)) {
          result = ((result + ("-".repeat(word.length))) + " ");  
            for (let i = 0; i < sentenceList.length; i++) {
                lett = sentenceList.charAt(i);
                reslett = result.charAct(i);
                    if (lett == "_") {
                          result = (reslett.replace("-"," "));
                    } else {
                          result = (reslett);
                    }
                }
    } else {
        result = ((result + word) + " ");
    }
    index = (index + 1);
}
return result;
}

The problem I'm having is with the for-loop inside the ifelse function. The main ifelse function basically says that if you're not on the current word, replace the length of the words (separated in 'sentenceList', then defined in 'word') with dashes. If you are on the current word, then just display that word as is. So a word by word display would look like this: Input = The dog ate the food

--- --- --- ----
*click*
The --- --- ----
*click*
--- dog --- ----

and so on. The problem I face (hence the need for the for-loop) is that I don't want to display word by word, instead I want to display region by region. These regions can include multiple words. So in the example above, the first region would be 'the dog' not just 'the'. In order to separate the string to display correctly on click, I simply changed the input to 'The dog, ate, the food' and made commas a delimiter to separate sentenceList. However, this yields this result:

------- --- --------
*click*
The dog --- --------

As you can see, the display is correct in that the first region rater than first word is shown but the replaceWithdash function is reading the spaces between words as a character, so the dash display is incorrect and now space is seen (so it looks like there are 3 words in the sentence and not 5). As a way to avoid this, I made all spaces an underscore (the above input then is "The_dog,_ate,_the_food") and am trying to get the for-loop to read character by character through the entire string (letter by letter with charAt) and change the 'result' based on that. I don't know much Java Script besides what I've been teaching myself, so I think my code might be a bit off here. I want the loop to go through each character index and check if that index in the 'sentenceList' string is an underscore. If it is an underscore, I need it to change that same character index in 'result' (since its the same sentence length technically) from a dash to a space. if it's not an underscore, I need it to just stay a dash. So, in the sentence above, through charAt(0)-charAt(3), the dashes should remain, but once you hit charAt(4), 'result' should now replace that dash with a space. The display I need is this:

--- --- --- --- ----
*click*
The dog --- --- ----

My experiment isn't initializing though, so I'm sure there's a problem, can anyone hep out?