CODEWITHSUNDEEP
javascripthtmlregex
user4943236
user4943236

Reputation: 6344

Java Script: replace function not working as expected

I have values in my HTML like below

348419 ( 26% )
99425 ( -11% )

I would like them to change the text color depending on the values in parenthesis. If the value is positive, it should be displayed in Green, else red.

I'm using the below code, however the text is always displayed in Green as all the starting values such as 348419,99425 are positive. It is not able to parse the values in brackets. Can someone pls help.

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 is like this:

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

Upvotes: 2

Views: 89

Answers (3)

Fred Truter
Fred Truter

Reputation: 666

You need to escape your round brackets as otherwise they have a special purpose in regex: to group items. In addition, you need to allow for whitespace inside the brackets. So your expression becomes /\(\s*[+-]?[0-9.]+%\s*\)/ instead of /([+-]?(\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
}

Upvotes: 1

mic4ael
mic4ael

Reputation: 8320

The problem is with the regular expression you are using. To retrieve only the number in the parenthesis, use /\(\s*([+-]?(\d)+)(?:%\s*\))/. Then the function would look like this

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

Upvotes: 1

Vinay Chittora
Vinay Chittora

Reputation: 115

The values are string. if you compare the string with numeric comparison operators, it will always be greater than 0. parse your html content in a way that it return only the 26 from "348419 ( 26% )" and -11 from "99425 ( -11% )"

in this code your regex not returning the valid value i.e. 

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

output : x = 99425 which is always a positive integer.

Upvotes: 1

Related Questions