title: javascript - Change the font color of the last word typed
body: <p>Ok I am making a text editor and have to try and make the last word typed change font color based on if it's a keyword or not... I have tried multiple solutions to this but nothing has prevailed... Here is what I have tried so far</p>
  
  <pre><code>function getLastWord() {
          var input = document.getElementById("my_text").value;
          //var input = document.getElementById(textArea.value);
  
          var inputValue = input.value;
          var lastWordTyped
          var changeColorOfWord;
          var ele = document.querySelector("#my_text");
  
          //ele.style.color = "blue"
  
          if (input == null) {
              input == " ";
          }
  
          lastWordTyped = input.substr(input.trim().lastIndexOf(" ") + 1);
          //lastWordTyped = inputValue.substr(inputValue.trim().lastIndexOf(" ") + 1);
  
          if (input != null) {
  
              for (var i = 0; i &lt; reservedKeyWords.length; i++) {
                  if ( lastWordTyped == reservedKeyWords[i] ) {
  
                      //changeColor(lastWordTyped);
                      //my_text.replace(inputValue, lastWordTyped);
                      //ele.fieldNameElement.innerHTML = lastWordTyped;
                      //ele.innerHTML = lastWordTyped;
                      ele.innerHTML.fontcolor = 'Blue';
                      return;
  
                  } else if (lastWordTyped !== reservedKeyWords[i]) {
  
                      //ele.innerHTML = ele.innerHTML.replace(lastWordTyped, '&lt;span style="color:black"&gt;&lt;/span&gt;');
                      //resetFontColor();
  
  
                  }
  
  
              }
          }
      }
  </code></pre>
  
  <p>I have tried this function (found from SO)</p>
  
  <pre><code>function changeColor(word) {
          var ele = document.querySelector("my_text");
          ele.onkeypress = function () {
              setTimeout(function () {
                  //the setTimeout is so the content is inserted before execution
                  document.getElementById('view_text').value = ele.textContent;
                  if (ele.innerHTML.indexOf(word) !== -1) {
                      ele.innerHTML = ele.innerHTML.replace(word, '&lt;span style="color:blue"&gt;' + word + '&lt;/span&gt;');
                  }
              }, 50);
          }
          }
  </code></pre>
  
  <p>Also I have tried this one:</p>
  
  <pre><code>function colorMyKeyword(keywordColor, text) {
  
          return '&lt;span style="color:' + keywordColor + '&gt;' + text + '&lt;/span&gt;';
      }
  </code></pre>
  
  <p>None of these functions have gotten the job done though. I have it now so that it will change the text color to blue but then the problem is that it changes ALL of the text to blue after that word...</p>
  
  <p>I would prefer this to be in javascript as I do not know how to use JQuery, or really CSS for that matter or even know how to write it.. </p>
  
  <p>Thank you for any responses.</p>