javascript - 在不使用 RegExp 的情况下访问和着色 HTML 表格单元格中的特定文本

Question

这是我表格的一部分:

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>

如您所见，每个单元格都有 2 个由反斜杠分隔的数字。 我能以某种方式为这两个数字分别应用不同的颜色吗？例如，在第一个 <td> 中, -1.413 为绿色，-5.113 为红色。

这是我尝试做的，但没有成功:

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

我用了这个fontcolor()方法，但没有用。由于 String 不是 DOM 元素，我不确定如何为它着色。

编辑:我的问题与this 不重复.我不打算使用 RegExp，主要是因为在我的案例中很难定义模式。有成千上万的数字是我无法预测的。着色是根据公式完成的(为简单起见，我没有在此处包含)。

编辑 2:

这是我的函数中的一段代码(您可能认为某些变量未声明等，但请注意，为简单起见，这是一个截取的代码段):

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';
            }
        }
    }
}

简单地说:这段代码所做的基本上是一些预格式化，并基本上确定为特定单元格指定哪种颜色。但在这种特定情况下，我需要为单元格中的特定信息片段着色，而不是整个单元格。

Answer 1

据我所知，您无法为特定文本部分设置样式。您将被迫操作 DOM，因为您说过您无权更改源 HTML。试试这个:

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>
    `;
};

此代码遍历您的 td 元素并解析出单元格中已有的每个数字，然后插入 span 元素代替每个数字，其中 span 使用 CSS 着色。

当然，如果除了需要操作的元素之外，页面上还有更多的 td 元素，则需要更具体地选择选择器。