JavaScript Replace substring within td element

Question

After several attempts and much searching, I have not yet found a solution for this one (though I am not very experienced in Javascript!). I have a table (which will be dynamically built), in which I wish to replace key words with icons. These key words will only be 'Green' or 'Yellow', however the date that is also part of the string is dynamic and needs to remain (I'll sort out its formatting later).

My HTML:

    <table cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
    <tr><th>Name</th><th>SOP ABC</th></tr>

    <tr><td>Mary Coppen</td><td>Green10/5/18</td></tr>
    <tr><td>Arlana Mycroft</td><td>Green12/6/18</td></tr>
    <tr><td>Bob Litchfield</td><td>Yellow05/09/18</td></tr>
    </table>

My JavaScript:

    var tds = document.getElementsByTagName('td');
    var Gimg = "<img src='/Content/StatusOK_16x.gif' />";
    var Yimg = "<img src='/Content/StatusWarning_12x_16x.gif' />";
    for (var i = 0; tds[i]; i++) {

    if (tds[i].innerHTML.includes('Green')) {
        tds[i].innerHTML.replace('Green', Gimg)
    }
    if (tds[i].innerHTML.includes('Yellow')) {
        tds[i].innerHTML.replace('Yellow', Yimg)
    }    
    }

JSFiddle

Many thanks for any suggestions!

You didn't say what problem you're facing, but I can see a little mistake, `for (var i = 0; tds[i]; i++)` needs to be `for (var i = 0; i < tds.length; i++)` — ADyson, Nov 29 '18 at 11:54
[`replace`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) returns a new string. — 001, Nov 29 '18 at 11:54
`String.prototype.replace` does not change your original string. It returns a new string and you need to reassign it back to your variable like this: `tds[i].innerHTML = tds[i].innerHTML.replace('Green', Gimg)` — Yeldar Kurmangaliyev, Nov 29 '18 at 11:55
@ADyson It is not an error, it works - it is just unusual usage of JS conditions. `tds[i]` will become falsy when encounters the first non-existing / null / undefined / equal to false / equal to 0 etc item. — Yeldar Kurmangaliyev, Nov 29 '18 at 11:56
@YeldarKurmangaliyev hadn't thought of it like that, but yes, I can see it would. — ADyson, Nov 29 '18 at 11:59

score 1 · Accepted Answer · edited Nov 29 '18 at 12:13

1

.replace returns a string that you will need to assign to target innerHTML

Try this code:

var tds = document.getElementsByTagName('td');
var Gimg = "<img src='/Content/StatusOK_16x.gif' />";
var Yimg = "<img src='/Content/StatusWarning_12x_16x.gif' />";
for (var i = 0; i < tds.length; i++) {

    if (tds[i].innerHTML.includes('Green')) {
        tds[i].innerHTML = tds[i].innerHTML.replace('Green', Gimg)
    }
    if (tds[i].innerHTML.includes('Yellow')) {
        tds[i].innerHTML = tds[i].innerHTML.replace('Yellow', Yimg)
    }    
}

Edit:- i< tds[i].length-1 will exclude the last element.

edited Nov 29 '18 at 12:13

Code Maniac

37,143
5
39
60

answered Nov 29 '18 at 11:54

Aefits

3,399
6
28
46

you forgot to fix the for loop – ADyson Nov 29 '18 at 11:56
@ADyson, corrected. Thanks for that catch. – Aefits Nov 29 '18 at 11:57
Nope that's not it. Now you've one one bracket too many. See my comment on the main thread. – ADyson Nov 29 '18 at 11:58
Actually apparently that condition in the loop is fine, seems I'm mistaken, sorry. Hadn't occurred to me it would do that. (Again see main comments) – ADyson Nov 29 '18 at 11:59
Got it! So, it was the tds[i].innerHTML = that I was missing – JohnV Nov 29 '18 at 12:04
@JohnV, correct. – Aefits Nov 29 '18 at 12:04
Why i< tds[i].length-1 it will not check for the last element than ? – Code Maniac Nov 29 '18 at 12:11

score 1 · Answer 2 · answered Nov 29 '18 at 12:29

Working one

 var tds = document.getElementsByTagName('td');
    var Gimg = "<img src='/Content/StatusOK_16x.gif' />";
    var Yimg = "<img src='/Content/StatusWarning_12x_16x.gif' />";
 for (var i = 0; i<tds.length; i++) {
    
  if (tds[i].innerHTML.includes('Green')) {
        tds[i].innerHTML =tds[i].innerHTML.replace(/Green/gi, Gimg)
       }
    if (tds[i].innerHTML.includes('Yellow')) {
            tds[i].innerHTML = tds[i].innerHTML.replace(/Yellow/gi, Yimg)
        }    
        
    }

What @elegant-users has answered is right.

I just want to add some explanation to it.

Why your code was not working ?

you used tds[i] it should be tds[i].length cause you need a value as a limit.
String.prototype.replace does not change your original string. It returns a new string and you need to reassign it back to your variable like this: tds[i].innerHTML = tds[i].innerHTML.replace('Green', Gimg) (very well explained in comment by @Yeldar Kurmangaliyev ).

score -1 · Answer 3 · answered Nov 29 '18 at 12:05

-1

Here is the solution

var tds = document.getElementsByTagName('td');
var Gimg = "<img src='https://via.placeholder.com/150' />";
var Yimg = "<img src='https://via.placeholder.com/150'/>";
for(var i=0; i < tds.length; i++) {
    const name = tds[i].innerHTML;
  if (name.includes('Green')) {
    tds[i].innerHTML = Gimg;
  }
  if (name.includes('Yello')) {
    tds[i].innerHTML = Yimg;
  }
}

answered Nov 29 '18 at 12:05

Jaya Krishna

313
4
14

This will replace the text that comes after the `Green` or `Yellow` text. – lloydaf Nov 29 '18 at 12:07
@LloydFrancis Is the code snippet that was shared in the question is not about that ? – Jaya Krishna Nov 29 '18 at 12:09
I mentioned that it needed to leave the date intact. This replaces everything within the td element. – JohnV Nov 29 '18 at 12:13
1

@JayaKrishna it is. That's the point. In the code snippet, he is using replace, which will only remove part of the `innerHTML`. But when you assign the entire `innerHTML` property to `Gimg` or `Yimg`, you will remove the part of the HTML that comes after `Green` or `Yellow`. – lloydaf Nov 29 '18 at 12:13

JavaScript Replace substring within td element

3 Answers3