Check if string not in array in 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>