Java Script: replace function not working as expected

Question

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>

Try this: if(cell.indexOf('-') !== -1 ){ //greeen cell = cell.replace('this string', 'this green string'); }else { cell = cell.replace('this string', 'this red string'); } — Suresh Mahawar
– Suresh Mahawar, Commented Jan 6, 2016 at 8:44

mic4ael · Accepted Answer · 2016-01-06 09:16:02Z

1

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

edited Jan 6, 2016 at 9:16

answered Jan 6, 2016 at 8:26

mic4ael

8,4304 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user4943236 Over a year ago

this is giving me an error, saying that x is undefined

user4943236 Over a year ago

the color is changing as expected but it is removing the brackets and percentage sign. Any idea how to fix that pls

user4943236 Over a year ago

thanks mic4ael, I edited and this worked. Marking this an official answer.

Vinay Chittora · Accepted Answer · 2016-01-06 08:22:14Z

1

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.

answered Jan 6, 2016 at 8:22

Vinay Chittora

11511 bronze badges

2 Comments

user663031 Over a year ago

parse your html content in a way that it return only the 26 from "348419 ( 26% ) And how would I do that, is the question.

Vinay Chittora Over a year ago

Try this "348419 ( -26% )".replace(/[^\w\s]/gi, '').trim().split(' ').pop()

David Knipe · Accepted Answer · 2016-01-06 09:25:51Z

1

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
}

edited Jan 6, 2016 at 9:25

David Knipe

3,5031 gold badge21 silver badges21 bronze badges

answered Jan 6, 2016 at 8:18

Fred Truter

6764 silver badges10 bronze badges

3 Comments

Fred Truter Over a year ago

@mic4ael thank you, I edited it and now it passes the tests on regex101.com

mic4ael Over a year ago

sure, but he is trying to retrieve only the value inside the parenthesis

user4943236 Over a year ago

the only problem that I'm getting is that values inside the parenthesis are in GREEN color irrespective of +ve or -ve values. Can it be fixed pls

Collectives™ on Stack Overflow

Java Script: replace function not working as expected

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related