javascript - One index is dependent on another index in Java Script

Question

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.

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

The problem I'm having is with the display of the dashed sentence. The first 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 'lett' and 'reslett' variables) 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 no space is seen (so it looks like there are 3 words in the sentence and not 5). As a way to avoid this, I'm trying to create another if-statement using the variables 'lett' and 'reslett' which pick out a specific index in the raw sentence and in the dashed sentence ('result'). The if-else is meant to say: if the character index in the sentence is a space, then the same character index in the result dashed sentence (since they are the same length) is replaced with a space. If the character is not a space, then just keep it as is in result, i.e. 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. 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 because it's not actually working. The display I need is this:

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

With this code, it just replaces all dashes with spaces (so the display is nothing), so something's wrong here, any ideas?

Answer 1

If I understood correctly, this is what you are looking or, right?

function replaceWithdash(sentenceList, currentWordNumber) {
    const regions = sentenceList.split(",")
    const sigil = regions.map(s => s.replaceAll(/[^s]/g, "-"))
    if (currentWordNumber !== undefined) {
        sigil.splice(currentWordNumber, 1, regions[currentWordNumber])
    }
    return sigil.join("")
}

str = "The dog, ate, the food"

console.log(replaceWithdash(str))
//"--- --- --- --- ----"

console.log(replaceWithdash(str, 0))
//"The dog --- --- ----"

console.log(replaceWithdash(str, 1))
//"--- --- ate --- ----"

console.log(replaceWithdash(str, 2))
// "--- --- --- the food"