Javascript 在不使用RegExp的情况下访问HTML表格单元格中的特定文本并为其着色

这是我桌子的一部分：

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>

我用了这个方法，但不起作用。由于String不是DOM元素，我不确定如何给它着色

编辑：我的问题不是重复的。我不打算使用RegExp，主要是因为在我的例子中很难定义模式。有成千上万的数字我无法预测。着色是基于公式完成的（为了简单起见，我这里没有包括公式）

编辑2：

这是我的函数中的一段代码（您可能认为有些变量没有声明等，但请注意，为了简单起见，这是一段删节代码）：

for（让numornstocute=2；numornstocute=flagNum）{
设greenCell=numBaseline*greenNum；
让orangeCell=numBaseline*orangeNum；
如果（numNewCellValue>=0&&numNewCellValue=greenCell&&numNewCellValue=0&&numNewCellValue=greenCell&&numNewCellValue

---

简单地说：这段代码所做的基本上是一些预格式化，基本上是确定给特定单元格指定的颜色。但是在这个特定的例子中，我需要给单元格中的一条特定信息上色，而不是整个单元格。

据我所知，您无法为文本的特定部分设置样式。您将被迫操作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>
    `;
};

var color1='green'；//或#008000"
var color2='红色'；//或#ff0000"
var tds=document.getElementsByTagName（'td'）；
对于（i=0；i

此代码遍历

td

元素，解析出单元格中已有的每个数字，然后插入

span

元素代替每个数字，并使用CSS对

span

进行着色

---

当然，如果页面上除了需要操作的元素外，还有更多的

td

元素，则需要更具体地使用选择器。

我认为这是一个非常棒的问题

其思想是通过反斜杠拆分字符串，然后用特定的标记（包含样式）将其包装起来

以下是一个例子：

$('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);
});

对于示例结果，请转到这里

---

希望这能有所帮助。

您可以尝试嵌套

for

循环，点击每个单元格，并用添加的

span

标记替换文本，这些标记可以分别为文本着色。我确保了这一点，而且它肯定对我有效：

<!--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>

红色/蓝色
蓝色\绿色
你好\粉红
坏\\黄色
你好\再见
//全局变量
//这一个表示文档中的所有TR标记
var tr=document.getElementsByTagName（“tr”）；
//对于所有TR标记，请执行。。。
对于（变量i=0；i

这个代码花了我很多精力，请不要讨厌它的惯例！！

---

我真的希望这有帮助

您可以手动修改原始表（即，不使用javascript）以显示所需的颜色；然后你可以研究如何通过javascript实现这一点。是的，但问题是我不能手动修改表。你的目标是什么？您想通过Javascript使每个

中的第一个数字变为绿色，第二个数字变为红色？不。实际的目标是根据一些公式（我在这里没有包括）对单元格进行着色。问题是如何在HTML

中为特定文本添加颜色。我想问一个简单的问题。我猜这个答案可能重复，假设我将把数据插入

，对吗？数据已经存在。我只需要给它上色。是的，它假设数据已经存在。这段代码只是处理已经存在的内容。编辑了答案以便进一步澄清。哦，是的，我明白了，我错过了

$('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);
});

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

<!--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>