一个索引依赖于 Javascript 中的另一个索引

Question

我正在为移动窗口设计自定进度阅读实验制作一个函数，其中输入一个句子，一个函数用破折号替换所有字母。然后参与者点击句子，发现第一个单词/区域；在下一次单击时，第二个单词/区域被揭开，前一个单词/区域再次被破折号覆盖，依此类推，直到句子结束。下面是我的 replaceWithdash 函数代码以实现此目的。

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;
}

我遇到的问题是虚线句子的显示。第一个 ifelse 函数基本上说，如果您不在当前单词上，则用破折号替换单词的长度（在 'sentenceList' 中分隔，然后在 'word' 中定义）。如果您在当前单词上，则按原样显示该单词。所以一个字一个字的显示应该是这样的： Input = The dog ate the food

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

等等。我面临的问题（因此需要 'lett' 和 'reslett' 变量）是我不想逐字显示，而是想逐个区域显示。这些区域可以包含多个单词。所以在上面的例子中，第一个 region 将是 'the dog' 而不仅仅是 'the'。为了分隔字符串以在点击时正确显示，我只是将输入更改为“狗，吃，食物”，并用逗号分隔句子列表。但是，这会产生以下结果：

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

如您所见，显示是正确的，因为显示了第一个区域评分器而不是第一个单词，但是 replaceWithdash 函数将单词之间的空格作为字符读取，因此破折号显示不正确并且看不到空格（所以看起来句子中有3个单词而不是5个）。作为避免这种情况的一种方法，我正在尝试使用变量“lett”和“reslett”创建另一个 if 语句，这些变量在原始句子和虚线句子（“结果”）中挑选出一个特定的索引。 if-else 的意思是：如果句子中的字符索引是空格，那么结果虚线句子中的相同字符索引（因为它们的长度相同）被替换为空格。如果字符不是空格，则保持原样，即破折号。因此，在上面的句子中，通过 charAt(0)-charAt(3)，破折号应该保留，但是一旦你点击 charAt(4)，'result' 现在应该用空格替换那个破折号。 除了我一直在教自己的东西之外，我对 Java Script 的了解不多，所以我认为我的代码可能有点离题，因为它实际上并没有工作。 我需要的显示是这样的：

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

使用此代码，它只是用空格替换所有破折号（所以显示什么都没有），所以这里出了点问题，有什么想法吗？

Answer 1

如果我理解正确，这就是你正在寻找的，对吧？

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"