Accessing and coloring specific text within HTML table cell without using RegExp

Question

This is a portion of my table:

index.php

<tr>
    <th>data_uwr</th>
    <td>-1.413\-5.113</td>
    <td>-3.314\-3.650</td>
    <td>-0.001\-0.010</td>
    <td>-1.052\-1.052</td>
    <td>-1.052\-1.052</td>
</tr>

As you can see, each of the cells has 2 numbers separated by a backslash. Can I somehow apply different colors to each of these 2 numbers? For example, in first <td>, -1.413 would be green and -5.113 would be red.

This is what I tried to do but it did not work:

index.js

// 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');

I used this fontcolor() method but it did not work. Since String is not a DOM element, I am not sure how I can color it.

Edit: My question is not duplicate of this. 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).

Edit 2:

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):

for (let numOfRunsToCompute = 2; numOfRunsToCompute < 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 < splitBaseline.length; i++) {
        let numBaseline = Math.abs(splitBaseline[i]);
        let numNewCellValue = Math.abs(splitNewCellValue[i]);

        if (numBaseline >= flagNum) {
            let greenCell = numBaseline * greenNum;
            let orangeCell = numBaseline * orangeNum;

            if (numNewCellValue >= 0 && numNewCellValue < greenCell) {
                // For example, this is where I need to apply those colors
                mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
            } else if (numNewCellValue >= greenCell && numNewCellValue <= 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 >= 0 && numNewCellValue < greenCell) {
                mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
            } else if (numNewCellValue >= greenCell && numNewCellValue < orangeCell) {
                mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'orange';
            } else {
                mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'red';
            }
        }
    }
}

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.

Answer 1

As far as I know, you can't style a specific section of text. You'll be forced to manipulate the DOM, since you said you don't have access to change the source HTML. Try this:

var color1 = 'green'; // or '#008000'
var color2 = 'red';   // or '#ff0000'
var tds = document.getElementsByTagName('td');
for (i = 0; i < tds.length; i++) {
    var td = tds[i];
    var numbers = td.innerHTML.split('\\');
    td.innerHTML = `
        <span style="color:` + color1 + `">` + numbers[0] + `</span> 
        \\
        <span style="color:` + color2 + `">` + numbers[1] + `</span>
    `;
};

This code iterates through your td elements and parses out each number that is already in the cell, then inserts span elements in place of each number, with the span's being colored using CSS.

Of course, if you have more td elements on the page besides the ones you need to manipulate, you'll need to be more specific with the selector.

Answer 2

I think this is an awesome question.

The idea is to split the string by backslash and then wrap it with specific tag (contain a style).

Here is the example:

$('table td').each(function() {
  var str = $(this).html();
  var arr = str.split("\\");
  var el1 = '<span class="green">' + arr[0] + '</span>';
  var el2 = '<span class="red">' + arr[1] + '</span>';
  // Replace current column
  $(this).html(el1 + '\\' + el2);
});

And you can write a simple CSS style:

.green {
  color: green;
}
.red {
  color: red;
}

For the example result, just go here https://jsfiddle.net/ngekoding/Lmjpx014/10/

Hope this can help.

Answer 3

You could try nested for loops, to hit each cell, and replace the text with added span tags that can color the text separately. I made sure this works and it definitely works for me:

<!--This Is The Demo Table, Fake Values and different slashes were used to display different results -->
<table>
    <tr>
        <td>red/blue</td>
        <td>blue\green</td>
    </tr>
    <tr>
        <td>hello\pink</td>
        <td>bad\\yellow</td>
        <td>hello\bye</td>
    </tr>
</table>
<!--The Actual JS Starts Here-->
<script type="text/javascript">
    //GLOBAL VARS
    //This one represents all TR Tags in the document
    var tr = document.getElementsByTagName("tr");
    //For all TR Tags, do...
    for (var i = 0; i < tr.length; i++) {
        //Create a Variable, representing all TD Tags inside current TR tag being scanned
        var nestedTD = tr[i].getElementsByTagName("td");
        //For All TD Tags Inside Current TR Tag, do...
        for (var j = 0; j < nestedTD.length; j++) {
            //If The InnerHTML Of Each Tag Contains the "\" Character...
            if (nestedTD[j].innerHTML.includes("\\")) {
                //Then Split The InnerHTML Value Based on "\" (It returns array with ["text", "", "text"])
                var splitContentList = nestedTD[j].innerHTML.split("\\");
                //Replace the InnerHTML with a green and a red span tag, wrapping the texts
                nestedTD[j].innerHTML = "<span style='color: green;'>" + String(splitContentList[0]) + "</span>" + "\\" + "<span style='color: red;'>" + String(splitContentList[2]) + "</span>";
            }
        }
    }
</script>

This code took me a lot of effort, please don't hate on its conventions!! I really hope this helps!