JavaScript Replace Multiple Characters in Text at Once

Question

I have a table that I'm trying to color based on the values in the table. So, if the value in the table is 150%, the cell would be colored red. If the value in the table is 50%, the value would be colored green. However, for some reason, the actual text in the table has a multitude of spaces within them as well as a % symbol. How can I replace any spaces and '%' characters with nothing ('')?

Here is what I have that isn't working:

<script type="text/javascript">

        $(document).ready(function () {
            $('#myTable td.PercentMem').each(function () {
                if ($(this).text().replace(/\s/g, '').replace('%', '') >= '100') {
                    $(this).css('background-color', '#ff0000');
                }
                else {
                    $(this).css('background-color', '#33cc33');
                }
            });
        });

    </script>

Thank you!

EDIT

I'm dumb. I forgot to include the fact that these percentages have a decimal point in them. So, what I'm really dealing with is something like "50.89%", and the solutions provided thus far convert that into "5089". How can I keep the decimal?

Would be easier to either search for all numbers or replace all non-numbers instead. — Guy Incognito
– Guy Incognito, Commented Dec 16, 2020 at 19:46
Additionally, you've to convert the resulting string to number, lexicographic comparison gives unexpected results with certain numbers, ex. "9" > "100" == true. — Teemu
– Teemu, Commented Dec 16, 2020 at 19:46

codemonkey · Accepted Answer · 2020-12-16 19:56:12Z

2

You need to strip out all non-numeric charactes plus convert the resulating string to an int. So something like this: parseInt($(this).text().replace(/\D/g,'')). Also, in your post you're comparing to a string '100', which obviously should be a number. Try this:

        $(document).ready(function () {
            $('#myTable td.PercentMem').each(function () {
                if (parseInt($(this).text().replace(/\D/g,'')) >= 100) {
                    $(this).css('background-color', '#ff0000');
                }
                else {
                    $(this).css('background-color', '#33cc33');
                }
            });
        });

Disclaimer: I have not actually tested this, but this should work.

edited Dec 16, 2020 at 19:56

answered Dec 16, 2020 at 19:49

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

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

3 Comments

Timothy Chen Over a year ago

That still wouldn't work because you are doing >= '100' which is a string not a number.

Pecker Over a year ago

Thanks for the help! I tried to implement this solution, but no matter what the values are the cell turns out red for me. Would you be able to explain what the "/\D/g" is?

codemonkey Over a year ago

@Pecker Sure thing. \d and \D are regex metacharacters. Here are their definitions:

\d (digit) matches any single digit (same as [0-9]). The uppercase counterpart \D (non-digit) matches any single character that is not a digit (same as [^0-9]).

\g simple means do it for all occurrences (globally). So replace(/\D/g,'') replaces all non-digits with an empty string.

felipekm · Accepted Answer · 2020-12-16 21:21:07Z

1

You can achieve with this, avoid to use jQuery to select elements, use pure JavaScript:

const myCells = document.querySelectorAll('.PercentMem');

myCells.forEach(cell => {
  const cellValue = cell.textContent.replace(/\D+/g, '');
        
  cell.classList.toggle(parseInt(cellValue) >= 100 ? 'red' : 'green');
});

Here is the complete fiddler with all the code.

edited Dec 16, 2020 at 21:21

answered Dec 16, 2020 at 20:04

felipekm

2,9305 gold badges34 silver badges45 bronze badges

7 Comments

Pecker Over a year ago

Thank you for the help! I tried out this solution, but no success :(. The cells didn't change to red or green with this case. I would try to troubleshoot your solution for my case, but I don't understand any of the syntax in your code

felipekm Over a year ago

Sadly, have you checked the fiddler link? There is a complete solution as you need.

Pecker Over a year ago

I have checked out the link. It works great there! Would you be able to explain what the "/\D+/g" does?

felipekm Over a year ago

Yeah sure, it is a Regex condition to remove any other char than numbers.

Pecker Over a year ago

Oh my... I'm sorry, I forgot to include one major thing! The percent's I'm dealing with look more like "50.89%", so in removing all non-numeric characters, I'm making that into 5089. How can I remove the spaces and percent but not the decimal?

|

Collectives™ on Stack Overflow

JavaScript Replace Multiple Characters in Text at Once

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related