Question

我正在尝试替换数组字符串中的字符，但它不起作用。基本上你输入一个单词，然后用户只需输入1个字符就可以猜到它。如果角色在单词中，那么应该用它替换星号。我可以用字符数组来做，但也可以使用字符串，对吧？

＆＃13;

$(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("");
   		});
  	}
	});
});

＆＃13;

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

＆＃13;

Answer 1

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

例如：单词hey将具有类似

的对象

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

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

要知道在哪里放置字母而不是星号我使用Array#find()来找到键入字母的键。如果结果为undefined - 则表示您尝试过的字母不在单词中。如果已定义，我将字母索引处的星号替换为正确的字母

＆＃13;

$(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("");
      });
    }
  });
});

＆＃13;

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

＆＃13;

Answer 2

我只是将单词翻译成字典，然后用它来确定掩码中替换字符的位置。

我故意遗漏了用户交互代码，因为它超出了要求。

见工作plnkr

var word = "milly";

var mask = '*'.repeat(word.length);

var dict = word
            .split('')
            .map((m, i) => ({ letter: m, index: i }))
            .reduce((f, c) => {
              if (f[c.letter]) {
                f[c.letter] = [f[c.letter], c.index];
                return f;
              }

              return Object.assign({}, f, {[c.letter]: c.index})
            }, {});

console.log(dict); // Object {m: 0, i: 1, l: Array[2], y: 4}

var input = "l";

function revealLetter(input, mask, dict) {

  var ind = dict[input];

  if (ind !== undefined && ind instanceof Array) {
    mask = ind.reduce((f, i) => changeCharacter(f, i, input), mask);
  } else {
    mask = changeCharacter(mask, ind, input);
  }

  return mask;
}

function changeCharacter(mask, ind, input) {
  return mask.split('').map((s, i, o) => i === ind ? input : o[i]).join('');
}

mask = revealLetter(input, mask, dict);

console.log(mask); // **ll*

刚使用了几张地图缩小了。你知道何时需要使用reduce，因为你将拥有一个数组，并且你需要一个单值。

如果你有什么要明确说明的话 - 但是日志很容易显示每个阶段会发生什么。

替换数组中的字符

2 个答案: