title: Highlighting Text and outputting to HTML
body: <p>So basically this is my current code. My objective is to colour code text as shown in the picture down below. I am working on a virtual server.</p>
  <p>In order to colour code the text and display it on the website interface, how do I have to go about it?</p>
  <p>I tried using nested for loops and if statements and it didn't work.</p>
  <pre><code>var words = jresp.POS1;
      console.log(words);
  
      for(let i = 0; i &lt; words.length; i++) //iterate through the rows
      {
          if(words[i][1] == 'ADJ')
              words[0].style.background = &quot;#800000&quot;;
          else if(words[i][1] == 'ADV')
              words[0].style.background = &quot;#aaffc3&quot;;
          else if(words[i][1] == 'ADP')
              words[0].style.background = &quot;#ff00ff&quot;;
          else if(words[i][1] == 'CONJ')
              words[0].style.background = &quot;#9a6324&quot;;
          else if(words[i][1] == 'DET')
              words[0].style.background = &quot;#dcbeff&quot;;
          else if(words[i][1] == 'NOUN')
              words[0].style.background = &quot;#469990&quot;;
          else if(words[i][1] == 'NUM')
              words[0].style.background = &quot;#00ffff&quot;;    
          else if(words[i][1] == 'PRT')
              words[0].style.background = &quot;#aaffc3&quot;;
          else if(words[i][1] == 'PRON')
              words[0].style.background = &quot;#500080&quot;; 
          else if(words[i][1] == 'PUNK')
              words[0].style.background = &quot;#b40000&quot;;
          else if(words[i][1] == 'VERB')
              words[0].style.background = &quot;#5f83ba&quot;;   
          else 
              words[0].style.background = &quot;#727272&quot;
      }
  
      document.getElementById(&quot;wOutput&quot;).innerHTML = words;
      console.log(words)
  </code></pre>
  <p><em>Brief Overview of the Program</em></p>
  <p>The program gets an input from the user via submit. The text is then passed to the js script and then POST to the python script. The python script will detect the language, tokenize the text and POS_TAG the tokenized text. It will then return the list to the JS file as JSON and output the POS_TAG to the HTML user interface. The output would include the inputted string and the highlighted words as shown in the picture below.</p>
  <p>Below is the Python Script</p>
  <pre><code>#!/usr/bin/python3
  
  import cgi;
  import json;
  import langdetect
  import nltk
  
  nltk.data.path.append('/home/amifsud02/nltk_data/')
  
  from langdetect import detect
  from nltk import tokenize
  from nltk.tokenize import word_tokenize
  
  def getPostDataAsJson (environ):
  
      #form = cgi.FieldStorage()
      #text = form.getvalue(&quot;post-text&quot;)
  
      post_json = {};
      storage = cgi.FieldStorage (fp=environ['wsgi.input'], environ=environ, keep_blank_values=True);
      for k in storage.keys():
          post_json[k] = storage.getvalue(k);
  
      return (post_json);
  
  def application (environ, start_response):
      form_params = getPostDataAsJson (environ);
  
      #Adding strings to the response body
      conttype = 'application/json';
      
      text = form_params[&quot;parainput&quot;]
      errorMessage = (&quot;The String Inputted is not in english&quot;)
  
      if detect(text) == 'en':
  
          tokenWord = word_tokenize(text)
  
          POS1 = nltk.pos_tag(tokenWord, tagset = 'universal')
          POS2 = nltk.pos_tag(tokenWord)
  
          taggedText = nltk.chunk.tree2conlltags(nltk.ne_chunk(POS1))
         
          data = {}
          data = {
              &quot;Language&quot;: detect(text),
              &quot;POS1&quot;: POS1,
              &quot;POS2&quot;: POS2,
              &quot;Tagged Text&quot;: taggedText
              &quot;Coloured String&quot;: colouredString           
          };   
  
          response_body = [bytes(json.dumps(data), encoding='utf-8')];
  
          print(data)
      else:
          response_body = [bytes(json.dumps(errorMessage), encoding='utf-8')];
  
  
      
      #find the content-length (sum of all strings' lengths)
      content_length = sum([len(s) for s in response_body]);
  
      status = '200 OK'
      
      response_header = [('Content-type',conttype), ('Content-Length', str(content_length))];
  
      start_response (status, response_header)
      return response_body;
  </code></pre>
  <p>Below is the JS Script</p>
  <pre><code>function postFieldDataToOurServer()
  {
      var fdata = new FormData ();
      var request = new XMLHttpRequest ();
      var jresp;
      var parainput = document.getElementById(&quot;parainput&quot;);
  
      console.log(parainput.value);
  
  
      //Populate the data we are going to send
      fdata.append(&quot;parainput&quot;, parainput.value);
      
      //send the data
      request.open(&quot;POST&quot;, &quot;/python3&quot;, false);
      request.send(fdata);
      
      //recieve and parse the output Data
      jresp = JSON.parse(request.responseText);
      
      
      var output = jresp.POS1 + &quot;&lt;br/&gt;&quot; + &quot; &quot;;
      document.getElementById(&quot;output&quot;).innerHTML = output;
        
      console.log(jresp);
  }
  </code></pre>
  <p>Below is a snippet of the HTML Script</p>
  <pre><code> &lt;div class = &quot;outputBox mt-2&quot; style = &quot;max-width: 30%;&quot;&gt;
                              &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;    
                          &lt;/div&gt;
  </code></pre>
  <p>Wanted Output:
  <a href="https://i.stack.imgur.com/yrFsa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yrFsa.png" alt="enter image description here" /></a></p>
  <p>I also tried to make use of this forum too:
  <a href="https://stackoverflow.com/questions/54167136/how-to-get-highlighted-text-with-legends-as-html-output">How to get highlighted text with legends as html output?</a>
  but I did not understand that much since it did not make use of javascript</p>