Using arrays to change color of certain words in an input box

Question

So I\'m working on a JSFiddle and I\'m a little confused about something. I have an input box called myTextField with a random paragraph and a button that calls my change functi

Answer 1

Ok, so first you need to break your input string value into an array.

var myString = document.getElementById('myTextField').value;
myString = myString.split(" ");

Then you can compare the two arrays using for loops based on the length of each array. You will embed a for loop in a for loop like this:

var matchingWords = document.getElementById("title");
var match = 0;
for (var i = 0; i < myString.length; i++) {
  for (var j = 0; j < matches.length; j++) {
    if (myString[i] == matches[j]) {
      match = 1;
      matchingWords.innerHTML += "" + " " + myString[i] + " " + "";
    } else if ((j == matches.length - 1) && match === 0) {
      matchingWords.innerHTML += " " + myString[i];
    } //else if
  } // for j
} // for i

You will also need to set a trigger that basically says that has or hasn't been a match.

If there is a match, set the match variable to 1 to nullify the else if. But, if there hasn't been a match and you are at the end of the inside loop then print the word without the special coloring.

Check out this jFiddle I made for you. I hope this helps. https://jsfiddle.net/shbrantley/s0nc734p/78/

Here is the full HTML:

Here is the full javascript:

var matches = ["every", "most", "that", "half", "much", "the", "another", "her", "my", "their", "a", "an", "his", "neither", "these", "all", "its", "no", "this", "any", "those", "both", "least", "our","what", "each", "less", "several", "which", "either", "many", "some", "whose", "enough", "more", "such", "your"];

change = function() {
  var myString = document.getElementById('myTextField').value;
  myString = myString.split(" ");
  var matchingWords = document.getElementById("title");
  var match = 0;
  for (var i = 0; i < myString.length; i++) {
    for (var j = 0; j < matches.length; j++) {
      if (myString[i] == matches[j]) {
        match = 1;
        matchingWords.innerHTML += "" + " " + myString[i] + " " + "";
      } else if ((j == matches.length - 1) && match === 0) {
      matchingWords.innerHTML += " " + myString[i];
      } //else if
    } // for j
    match = 0; // reset match
  } //for i
} //change