JavaScript 中不匹配的相同字符串

Posted 2023-05-08

【中文标题】JavaScript 中不匹配的相同字符串

【英文标题】：Identitical Strings that do not match in JavaScript

【发布时间】：2020-07-07 17:40:21

【问题描述】：

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

我正在使用 jQuery 和 jQuery UI 可排序方法。 jQuery sortable 和 html & CSS 都可以正常工作，但在我的 javascript if 语句中，将答案字符串与用户解决方案字符串进行比较总是 false 无论如何。真正奇怪的是，据我所知，console.log 显示的字符串在各个方面都是相同的。即 typeof 显示它们都是“字符串”类型，两个字符串的长度都显示为 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;

如果有人有任何问题，请告诉我。任何帮助表示赞赏。我想我需要用新的眼光来看待这件事。提前致谢！

【问题讨论】：

酷应用！当我在比较console.log(solution, answer); 之前登录控制台时，我看到："Henrywants to go to the store!" "Henry wants to go to the store!"。你能从那里弄清楚吗？

【参考方案1】：

据我所知，经典的空白边缘案例。通过处理提供的答案和解决方案中的空白，我能够让您的代码正常工作。

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

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

【讨论】：

欢迎来到 SO！我对这个解决方案并不感兴趣，因为它会混淆单词并且会引入误报，声称 "foo bar" 和 "fo obar" 是相同的。人为的例子，但它可能发生。 combined = sentence_start + " " + placed_words + sentence_end 只是添加了缺失的空间，看起来侵入性较小。无论哪种方式，都不需要调用trim，因为您已经删除了所有空格。

如果我只是在 html 中的“Henry”之后添加一个空格并将其设为“Henry”，那么它会起作用。无需修剪（）。我将不得不想出一种方法来小心测验创建者在写句子时添加或遗漏空格。我将使用 php 表单来让老师写自己的句子和答案，所以修剪应该派上用场。谢谢大家！