title: Accessing and coloring specific text within HTML table cell without using RegExp
body: <p>This is a portion of my table:</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;tr&gt;
      &lt;th&gt;data_uwr&lt;/th&gt;
      &lt;td&gt;-1.413\-5.113&lt;/td&gt;
      &lt;td&gt;-3.314\-3.650&lt;/td&gt;
      &lt;td&gt;-0.001\-0.010&lt;/td&gt;
      &lt;td&gt;-1.052\-1.052&lt;/td&gt;
      &lt;td&gt;-1.052\-1.052&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>As you can see, each of the cells has 2 numbers separated by a backslash. <strong>Can I somehow apply different colors to each of these 2 numbers?</strong> For example, in first <code>&lt;td&gt;</code>, -1.413 would be green and -5.113 would be red.</p>
  
  <p>This is what I tried to do but it did not work:</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>// This is how I get the row. What this code does is it colors the entire cell - everything in the cells becomes green.
  mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
  
  // Then I tried splitting cell content into an array (of strings), and coloring each string - each number became a string
  let test = mainTable.rows[rowNumber].cells[numOfRunsToCompute].firstChild.textContent.split('\\');
  test[0].fontcolor('green');
  </code></pre>
  
  <p>I used this <a href="https://www.w3schools.com/jsref/jsref_fontcolor.asp" rel="nofollow noreferrer">fontcolor()</a> method but it did not work. Since <em>String</em> is not a DOM element, I am not sure how I can color it.</p>
  
  <p><strong>Edit</strong>: My question is not duplicate of <a href="https://stackoverflow.com/questions/24625402/how-to-color-portion-of-text-using-css-or-jquery">this</a>. I do not intend to use RegExp mainly because it is very hard to define a pattern in my case. There are thousands of numbers that I cannot predict. The colorization is done based on formulas (which I did not include here for simplicity).</p>
  
  <p><strong>Edit 2</strong>:</p>
  
  <p>This is a snippet of code from my function (you may think that some variables are not declared etc., but note that this a cut-out snippet for simplicity purposes):</p>
  
  <pre><code>for (let numOfRunsToCompute = 2; numOfRunsToCompute &lt; runs; numOfRunsToCompute++) {
      let baseline = mainTable.rows[rowNumber].cells[1].firstChild.textContent;
      let newCellValue = mainTable.rows[rowNumber].cells[numOfRunsToCompute].firstChild.textContent;
      let splitBaseline = baseline.split('\\');
      let splitNewCellValue = newCellValue.split('\\');
  
      for (let i = 0; i &lt; splitBaseline.length; i++) {
          let numBaseline = Math.abs(splitBaseline[i]);
          let numNewCellValue = Math.abs(splitNewCellValue[i]);
  
          if (numBaseline &gt;= flagNum) {
              let greenCell = numBaseline * greenNum;
              let orangeCell = numBaseline * orangeNum;
  
              if (numNewCellValue &gt;= 0 &amp;&amp; numNewCellValue &lt; greenCell) {
                  // For example, this is where I need to apply those colors
                  mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
              } else if (numNewCellValue &gt;= greenCell &amp;&amp; numNewCellValue &lt;= orangeCell) {
                  mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'orange';
              } else {
                  mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'red';
              }
          } else {
              let greenCell = numBaseline + greenOrangeWorse;
              let orangeCell = greenCell + greenOrangeWorse;
  
              if (numNewCellValue &gt;= 0 &amp;&amp; numNewCellValue &lt; greenCell) {
                  mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
              } else if (numNewCellValue &gt;= greenCell &amp;&amp; numNewCellValue &lt; orangeCell) {
                  mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'orange';
              } else {
                  mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'red';
              }
          }
      }
  }
  </code></pre>
  
  <p>To put it simply: what this code does is basically some pre-formatting and essentially determining which color to give a particular cell. But in this specific case, I need to color a particular piece of information in the cell, not entire cell.</p>