Общие буквы между двумя строками в JavaScript

Question

Я пытаюсь посчитать количество общих букв между input пользователя и сгенерированным числом. Я считаю это так, чтобы расположение между ними не имело значения (поэтому 411 и 004 должны сказать «1 общее число»).

Я поместил свой code во фрагмент ниже. Он работает нормально, за исключением того, что , когда сгенерированный 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

Сначала вы можете уменьшить каждую строку, чтобы она включала только уникальные символы, т.е. 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 2

Это не совсем тривиально. Например, вы не можете просто использовать filter или includes или has тесты сами по себе, потому что, как только персонаж найден, вы должны удалить его из каждой коллекции, чтобы он не получить соответствие снова. Я бы использовал 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>

Answer 3

Вы можете сделать что-то вроде:

$(".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>