Question

我的HTML中有值，如下所示

348419 ( 26% )
99425 ( -11% )

我希望他们根据括号中的值更改文本颜色。如果值为正，则应显示为绿色，否则显示为红色。

我使用下面的代码，但是文本始终以绿色显示，因为所有起始值（例如348419,99425）都是正数。它无法解析括号中的值。有人可以帮忙。

var cells = document.querySelectorAll('#tableID td');

for ( var i=0; i<cells.length; i++ ) {
var cell    = cells[i];
var html    = cell.innerHTML;
var changed = html.replace(/([+-]?(\d|\.)+)/, function(x) {
    var color = (+x) < 0 ? 'red' : 'green';
    return '<span style="color: ' + color + '">' + x + '</span>';
});

cell.innerHTML = changed;
}

HTML就像这样：

<table id="tableID">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
<th>Column heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>348419 ( 26% )</td>
<td>99425 ( -1% )</td>
<td>946574 ( 0% )</td>
<td>99485 ( -11% )</td>
</tr>
<tr>
<td>33348419 ( 36% )</td>
<td>746733 (-32%)</td>
<td>36689279 (0)</td>
<td>27678 (28%)</td>
</tr>
<tr>
 <td>7734190 ( 6% )</td>
 <td>333879 ( 35% )</td>
 <td>3878 (-10% )</td>
 <td>4419 ( -99% )</td>
 </tr>

Answer 1

您需要转义圆括号，否则它们在正则表达式中具有特殊用途： group 项。此外，您需要允许括号内的空格。因此，您的表达式变为/\(\s*[+-]?[0-9.]+%\s*\)/而不是/([+-]?(\d|\.)+)/

var cells = document.querySelectorAll('#tableID td');

for ( var i=0; i<cells.length; ++i ) {
    var cell    = cells[i]
    var html    = cell.innerHTML
    var changed = html.replace(/\(\s*[+-]?[0-9.]+%\s*\)/, function(x) {
        var color = (+x) < 0 ? 'red' : 'green'
        return '<span style="color: ' + color + '">' + x + '</span>'
    })

    cell.innerHTML = changed
}

Answer 2

值是字符串。如果你将字符串与数字比较运算符进行比较，它将始终大于0.解析你的html内容，使其仅返回“348419（26％）”中的26和“99425（-11％）中的-11” “

在此代码中，您的正则表达式不返回有效值，即

"99425 ( -11% )".replace(/([+-]?(\d|\.)+)/, function(x) {console.log(x);})

输出：x = 99425，它总是一个正整数。

Answer 3

问题在于您正在使用的正则表达式。要仅检索括号中的数字，请使用/\(\s*([+-]?(\d)+)(?:%\s*\))/。然后该函数看起来像这样

var changed = html.replace(/\(\s*([+-]?(\d)+)(?:%\s*\))/, function(match, group) {
    var color = (+group) < 0 ? 'red' : 'green'
    return '<span style="color: ' + color + '">' + group + '</span>'
})

Java脚本：替换功能不按预期工作

3 个答案: