javascript - 替换数组中的字符

Question

我正在尝试替换数组字符串中的字符，但它不起作用。 基本上，您输入一个单词，然后用户必须在仅输入 1 个字符的情况下猜测它。如果该字符在单词中，则应将其替换为星号。 我可以用字符数组来做到这一点，但它也应该可以用字符串来实现，对吗？

$(document).ready(function(){

      $('#div_letter').hide();
      var word_input = $('#word');
      word_array = [];
      
      word_input.keypress(function(e){
        if(e.keyCode == 13){   // if enter is pressed
              
          var v_word_array = word_input.val(); // get the word
          var word_length
          word_array.push(v_word_array); //push the word in an array
          word_length = v_word_array.length;      //get the length of the word
          var stars = "*";

          for(var i = 0; i<= word_length-2; i++){ //create a new array of stars with the same length as the word
            stars = "*"+stars;
          }      
          word_array.push(stars);    
          word_input.val(""); // clear input

       //[0] -> word, [1] -> *
       $('#div_word').hide();
       $('#div_letter').show();
       $('#display').text(word_array[1]);

       $('#letter').keypress(function(e){ //if any key is pressed
          var _letter = $(this);
          var char = String.fromCharCode(e.which); //get which key

       for(var n = 0; n <= word_array[0].length; n++){
       // HERE IS THE PROBLEM
        if(word_array[0][n] == char){
          word_array[1] = word_array[1].replace(word_array[1][n], char); //this one should replace a character in position "n" with the "char" variable, fe: "test" -> typing "e" -> "*e**"
          console.log(word_array);
        }  
      }
      _letter.val("");
   		});
  	}
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div id="div_word">
<label>Enter your Word</label>
<input id="word" type="text"><br>
</div>

<div id="div_letter">
<label>Type a letter</label>
<input id="letter" type="text"/><br>
</div>

<label>Display Array:</label>
<div id="display">

</div>

Answer 1

我正在创建一个对象letters，它将获取所有字母作为键，值是一个数组，其中包含单词中字母的所有索引。

例如:单词hey将具有类似的对象

{
    "h":[0],
    "e":[1],
    "y":[2]
}

我正在使用 Array#map() 创建星星数组。

为了知道在哪里放置字母而不是星号，我使用 Array#find() 来查找键入字母的键。如果结果是未定义 - 这意味着您尝试的字母不在单词中。如果已定义，我会将字母索引处的星号替换为正确的字母

$(document).ready(function() {

  $('#div_letter').hide();
  var word_input = $('#word');
  var word_array = [];
  var letters = {};

  word_input.keypress(function(e) {
    if (e.keyCode == 13) {
      word_array = Array.from(word_input.val());
      letters = word_array.reduce((obj,letter, i)=>{
        obj[letter] = obj[letter] || [];
        obj[letter].push(i);
        return obj;
      }, {});
      var stars = word_array.map(l=>"*");
      
      $('#div_word').hide();
      $('#div_letter').show();
      $('#display').text(stars.join(""));

      $('#letter').keypress(function(e) { //if any key is pressed
        var _letter = $(this);
        var char = String.fromCharCode(e.which).toLowerCase(); //get which key
        
        let keyLetter = Object.keys(letters).find(l=>l.toLowerCase()===char);
        if(keyLetter){
          letters[keyLetter].forEach(i=>stars[i] = char);
          $('#display').text(stars.join(""));
        }
        _letter.val("");
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div id="div_word">
  <label>Enter your Word</label>
  <input id="word" type="text"><br>
</div>

<div id="div_letter">
  <label>Type a letter</label>
  <input id="letter" type="text" /><br>
</div>

<label>Display Array:</label>
<div id="display">

</div>