javascript - JavaScript 中不匹配的相同字符串

Question

我正在构建一个可排序的单词测验，用户必须将句子中的单词按正确的顺序排列。这个想法是，用户从句子下方拖动单词，然后单词 block 根据他们的解决方案是否与答案匹配而亮起绿色或红色。

我正在使用 jQuery 和 jQuery UI 可排序方法。 jQuery 可排序以及 HTML 和 CSS 都工作正常，但在我的 JavaScript if 语句中，将答案字符串与用户解决方案字符串进行比较始终为 false 。真正奇怪的是，据我所知，console.log 显示字符串在各个方面都是相同的。即 typeof 显示它们都是“string”类型，并且两个字符串的长度都显示 31。我什至添加了一些代码来删除字符串末尾的空白以清理它们。答案存储在名为 answer 的变量中，用户解决方案存储在名为 solution

的变量中

演示代码已在 codepen 上发布:

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

据我所知，这是典型的空白边缘情况。我能够通过处理提供的答案和解决方案中的空白来使您的代码正常工作。

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

但是您的第一个单词似乎缺少空格。 “想要”