如何用键入的字母替换字符？

Question

我正在尝试创建一个子手游戏，但是我找不到任何方法来使键入的值替换我插入的破折号。我想用guest单词的索引替换每个类型的字母。有人可以帮我吗？

let dashesArr = [];
let answerArr = [];

function setNumberOfDashes() {
    let word = findRandomWord();
    let displayDashes;
    for(let i = 0; i < word.length; i++) {
        dashesArr.push("-");
    }

    dashes.innerHTML = dashesArr.join("");
}

function getCharCode(e) {
    let keyValue = String.fromCharCode(e.keyCode);
    matchKeyToWord(keyValue);
}

function matchKeyToWord(keyValue) {
pattern =  keyValue;
    let string =  randomWordGlobal[0];
    let regexp = new RegExp(`${pattern}`, "i");
    let result = string.match(regexp);

    for(let i = 0; i < string.length; i++) {
        answerArr.push(string[i]);
    }

    if(result != null) {

        //change dashes.innerHTML at some position to the match value;

        let i = 0;
        if (i < string.length) {
          let test = dashesArr.insert(i, answerArr[i]);
               dashes.innerHTML = test;
               console.log(dashesArr);
               console.log(test);
            i++;
        }

    } else {
        getBodyParts();
    }
}

Array.prototype.insert = function ( index, item ) {
    return this.splice( index, 1, item );
};

function findIndex(string, result) {
    for(let i = 0; i < string.length; i++) {
        let index = string.indexOf(result);
        return index;
    }
}


window.addEventListener("keypress", getCharCode);

Answer 1

另一个版本...

let wordToGuess = 'baudelaire';

let hangman = document.body.querySelector('#hangman');
let output = '';
hangman.innerHTML = wordToGuess.split('').map(l => '-').join('');
let errorCount = 0;
let errorCounter = document.body.querySelector('#errorCounter code');
let guessed = [];
let completed = false;

window.addEventListener('keyup', event => {
  if(completed) return;
  let key = String.fromCharCode(event.keyCode).toLowerCase();
  if(wordToGuess.includes(key) && !guessed.includes(key)) {
    guessed.push(key);
    output = wordToGuess.split('').map( char => {
    	if(guessed.includes(char)) return char;
        if(char == key) return key;
        return '-';
    }).join('');
    if(!output.includes('-')) {
      completed = true;
      document.body.querySelector('#completed').innerHTML = "Nice !";
    }
    hangman.innerHTML = output;
  } else {
    errorCount++;
    errorCounter.innerHTML = errorCount;
  }
}, false);

#hangman {
  font-size: 25px;
}

<div id="hangman"></div>
<div id="errorCounter">error count : <code>0</code></div>
<div id="completed"></div>

Answer 2

我为您要做的事情做了一个简单的版本。在示例中尝试使用类似的内容。希望对您有所帮助。

单击代码段并开始输入"test"。

var result = document.querySelector("#result");
var word = "test";
var dashes = "";

function getDashes() {
  for (let i of word)
    dashes += "-"
  result.innerHTML = dashes;
}

window.addEventListener("keypress", function (e) {
  let temp = dashes.split();
  for (let i = 0; i < word.length; i++) {
    if (dashes[i] === "-")
      temp[i] = word[i] === e.key ? word[i] : "-";
    else
      temp[i] = word[i];
  }
  dashes = temp.join("");
  result.innerHTML = dashes;
});

getDashes();

<p id="result"></p>