JavaScript 中两个字符串之间的常用字母

Question

我正在尝试计算用户的input 和生成的数字之间的常见字母数。我正在计算它，以便它们之间的位置无关紧要（所以 411 和 004 应该说“1 个共同的数字”）。

我已将我的code 放在下面的 sn-p 中。它工作正常，除此之外，当生成的string 有两个相同的数字时，它不能正常工作。你可以看到输入“4”，它会说那里是两个字符。通常，当实际上只有一个时（它会将四个数​​两次。）

所以，毕竟，我要问什么是显示input 和generated number? 之间常用字母的最佳方式

我可以使用jQuery 和/或JavaScript，如果我的代码不是很好，很抱歉，我一点也不先进。

提前感谢您的帮助！ :)

  // on ".check" click...

$(".check").click(function() {
  var nmb = $(".number").text();
  var ltr = $(".input").val();
  var count = $(".cnt");

  // Set logged text to 0
  
  count.text("0");

  // Test for numbers in common

  if (ltr.includes(nmb.charAt(0))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  if (ltr.includes(nmb.charAt(1))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  if (ltr.includes(nmb.charAt(2))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  if (ltr.includes(nmb.charAt(3))) {
    count.html(function(i, val) {
      return val * 1 + 1
    });
  }
  
  $(".res1").html(" numbers in common");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" placeholder="Try typing 4 to see the issue" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
  <span class="cnt"></span>
  <span class="res1"></span>
</span>

Answer 1

你可以这样做：

$(".check").click(function() {
  var nmb = $(".number").text().trim().split('');   //Get the text and convert to string
  var ltr = $(".input").val().trim().split('');     //Get the value and convert to string
  var commonLetters = [];                           //The common letters will be stored on this variable

  ltr.forEach(function(v) {                         //Loop thru the user's input letters
    var idx = nmb.indexOf(v);                       //Find its index
    if (idx !== -1) {                               //Check if found
      commonLetters.push(4);                        //If found, push the letters to commonLetters
      nmb[idx] = '';                                //Clear the index
    }
  })

  $(".cnt").text(commonLetters.length);
  $(".res1").html(" numbers in common");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" placeholder="Try typing 4 to see the issue" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
   <span class="cnt"></span>
   <span class="res1"></span>
</span>

Answer 2

首先，您可以将每个字符串缩减为仅包含唯一字符，即 4410 可以缩减为 410，因为您不需要多次测试 4。您可以通过为每个字符串创建一个Set 来做到这一点：

var numberSet = new Set(nmb);
var inputSet = new Set(ltr);

然后您可以迭代其中一个，以获得最短的迭代次数，并使用has() 方法查看该字符是否在另一个Set中

var counter = 0;
for(letter of inputSet){
  if(numberSet.has(letter)){
    counter++;
  }
}

// on ".check" click...

$(".check").click(function() {
  var nmb = new Set( $(".number").text() );
  var ltr = new Set( $(".input").val() );
  var count = $(".cnt");

  var counter = 0;
  for(let letter of nmb){
     if(ltr.has(letter)){
       counter++;
     }
  }
  //No need to continually update text / html as each update wont be
  //seen anyway so just set it once outside the loop.
  count.text(counter);
  
  $(".res1").html(" numbers in common");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" placeholder="Try typing 4 to see the issue" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
  <span class="cnt"></span>
  <span class="res1"></span>
</span>

Answer 3

这并不完全是微不足道的。例如，您不能简单地单独使用 filter 或 includes 或 has 测试，因为一旦找到一个字符，您必须将其从 each 集合中删除，这样它就不会' t 再次匹配。每次找到匹配项时，我都会使用 reduce 和 splice 字符数组来删除找到的字符。 （这个不需要jQuery）

document.querySelector('.check').addEventListener('click', () => {
  const numChars = [...document.querySelector('.number').textContent];
  const inputChars = [...document.querySelector('.input').value];
  const matchingCharCount = inputChars.reduce(
    ({ remainingNumChars = numChars, matchCount = 0 } = {}, inputChar) => {
      if (remainingNumChars.includes(inputChar)) {
        remainingNumChars.splice(remainingNumChars.indexOf(inputChar), 1);
        matchCount++;
      }
      return { remainingNumChars, matchCount };
    }, { remainingNumChars: numChars, matchCount: 0 })
    .matchCount;
  document.querySelector('.cnt').textContent = matchingCharCount;
  document.querySelector('.res1').textContent = " numbers in common"
});

Generated Number: <span class="number">4410</span><br><br>
<input type="text" class="input" maxlength="4">
<input class="check" type="submit" value="CHECK">
<br><br>
<span id="full_res">
  <span class="cnt"></span>
  <span class="res1"></span>
</span>