Идентичные строки, которые не совпадают в JavaScript

Question

Я создаю сортируемую викторину, в которой пользователь должен поместить слова предложения в правильном порядке. Идея состоит в том, что пользователь перетаскивает слова из-под предложения, а затем блоки слов загораются зеленым или красным в зависимости от того, соответствует ли их решение ответу.

Я использую jQuery и сортируемый метод jQuery UI. jQuery sortable и HTML & CSS все работает нормально, но в моем JavaScript if утверждении, сравнивающем строку ответа со строкой решения пользователя, всегда false , несмотря ни на что. Насколько я могу судить, действительно странным является то, что console.log показывает, что строки во всех отношениях идентичны. то есть typeof show, они оба имеют тип "string", а длина обеих строк показывает 31. Я даже добавил некоторый код, чтобы вырезать пробелы из концов строк, чтобы очистить их. Ответ хранится в переменной с именем answer , а решение пользователя хранится в переменной с именем solution

Демонстрационный код находится здесь, на коде ручки:

https://codepen.io/codepajamas/pen/zYGMveN?editors=1111

Вы можете открыть консоль, чтобы увидеть результат.

Ниже приведены HTML, CSS и JavaScript Код:

<div class="sentence" data-answer="Henry wants to go to the store!">
  <span class="sentence-start">Henry</span>
  <ul class="words place-words"></ul>
  <span class="sentence-end">to the store!</span>
</div>
<ul class="words supply-words"><li class="word">wants </li><li class="word">go </li><li class="word">to </li></ul>

$(function () {

var answer = $('.sentence').data('answer'); // "Henry wants to go to the store!"

$('.words').sortable({
  connectWith: '.place-words, .supply-words',
  beforeStop: function () {

    if ($('.supply-words').text() === '') {
      var sentence_start = $('.sentence-start').text(),
          placed_words = $('.place-words').text(),
          sentence_end = $('.sentence-end').text(),
          combined = sentence_start+placed_words+sentence_end,
          // get rid of line returns and white space at beginning and end of sentence
          solution = combined.replace(/(\r\n|\n|\r)/gm,'').trim();

      if (solution === answer) {
        console.log('correct');
        $('.place-words').removeClass('wrong').addClass('correct');
      } else {
        console.log('wrong');
        $('.place-words').removeClass('correct').addClass('wrong');
      }

    }// outer if
  }// beforeStop function
 });

$('.words, .answer').disableSelection();

}; //end document ready

.sentence {
  margin: 0 0 10px 0;
}

.words {
  display: inline-block;
  margin: 0 5px 0 5px;
  padding: 0;
  width: auto;
  min-width: 135px;
  height: 30px;
  border: 1px dashed #ccc;
  vertical-align: bottom;
}

.word {
  display: inline-block;
  margin: 0;
  border: 1px solid #000000;
  padding: 5px 10px;
  cursor: pointer;
}

.correct {
  background: lime;
}

.wrong {
  background: pink;
}

Дайте мне знать, если у кого-то возникнут вопросы. Любая помощь приветствуется. Я думаю, мне нужно несколько глаз на это. Заранее спасибо!

Answer 1

Classi c крайний случай пробелов из того, что я могу сказать. Я смог заставить ваш код работать, обрабатывая пробелы как в предоставленном ответе, так и в решении.

// add this just before you if statement.
solution = solution.replace(/ /g, "");
answer = answer.replace(/ /g,"").trim();

Но похоже, что вам не хватает места в вашем первом слове. "хочет"