检查字符串是否不在数组中 javascript

Question

Yesterday I asked a question and, "with a little help from my friends" got my little javascript working.

This one:

<script type="text/javascript" >    
function paint_cells() {
  var tds = document.querySelectorAll('tbody td'), i;
  for(i = 0; i < tds.length; i += 3) {
      if(tds[i+1].textContent != tds[i+2].textContent){
      tds[i+2].bgColor = "red";
    }
  }
}
paint_cells();
</script>

Now I would like to tweak this to cater for multiple correct answers. For example, both 'don't hurry' or 'do not hurry' are correct. In my MySQL table, they are stored as a string like this:

don't hurry|do not hurry

I want to split the string on |and then check if the student's answer is in the array (same as I do in PHP when marking the answers).

Not all answers have multiple correct answers. I hope that is not a problem for.split()??

I tried this, but I am not getting the result I want. Can you please help me tweak this to give me the result I want?

Edit: I thought maybe the apostrophes were causing the problem, so I escaped them. I trimmed each variable. But I still don't get what I want? Any tips please?

   <script type="text/javascript" >    
function paint_cells() {
  var tds = document.querySelectorAll('tbody td'), i;
  for(i = 0; i < tds.length; i += 3) {
    var arr = tds[i+1].textContent.split('|');
    for(j = 0; j < arr.length; j++) {
        arr[j].trim();
        arr[j].replace(/'/g, "\'");
        }
    var myvar = tds[i+2].textContent;
    myvar.trim();
    myvar.replace(/'/g, "\'");
    //console.log("Your line would be here")//Prints a line on the console 
    if(!arr.includes(myvar)){
        //if(arr[0] != myvar){          
            alert('Array length: ' + arr.length + ' Answers: ' + tds[i+1].textContent + ' Student answer:' + myvar);            
          tds[i+2].bgColor = "red";
    }
  }
}
paint_cells();
</script>

Answer 1

Quotes don't matter. You have to reset the array to the trimmed value... trim returns the modified value, it doesn't "change in place".

var arr = answers.split('|');
for(var ii=0; ii<arr.length; ii++){
    arr[ii] = arr[ii].trim().toLowerCase();
}

Here's a working example (run code snippet below):

 function paint_cells() { var tds = document.querySelectorAll('tbody td'); for (var i = 0; i < tds.length; i += 3) { var cell_1 = tds[i + 1]; var cell_2 = tds[i + 2]; var answers = cell_1.textContent; var arr = answers.split('|'); for (var ii = 0; ii < arr.length; ii++) { arr[ii] = arr[ii].trim().toLowerCase(); } var guess = (cell_2.textContent || "").trim().toLowerCase(); //console.log("Your line would be here")//Prints a line on the console if (arr.indexOf(guess) < 0) { console.log('Array length: ' + arr.length + ' Answers: ' + answers + ' Student answer:' + cell_2.textContent); cell_2.style.backgroundColor = "red"; } } } paint_cells()

 <table> <tbody> <tr> <td></td> <td>don't hurry|do not hurry</td> <td>do not hurry</td> </tr> <tr> <td></td> <td>don't hurry|do not hurry</td> <td>don't hurry</td> </tr> <tr> <td></td> <td>don't hurry|do not hurry</td> <td>abc</td> </tr> <tr> <td></td> <td>don't hurry|do not hurry</td> <td>xyz</td> </tr> </tbody> </table>