Javascript find and replace with variables

Question

I'm almost there with something thanks to the help of stackoverflow users. I just need a bit more help with this one.

I have a HTML page with a dynamically generated table of data which I cannot alter view. It's returned like this:

<tr>
<td class="name">foo<</td>
<td class="time">5:36:13</td>
<td class="avtime">0:09:36</td>
<td class="transcripts">0</td><td class="views">35</td>
<td class="percent">100</td>
</tr>

What I need to do is find and replace:

<td class="percent">$foo</td>

With:

<td class="percent"><span class="bar" style="width:$foo%"></span></td>

As I say I was almost there and have replacements working just not with variable values.

What I have now:

function replaceScript() {
var toReplace = '<td class="percent">69</td>';
var replaceWith ='<td class="percent"><span class="bar" style="width:69%"></span>  </td>';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}

Can you help?

Thanks in advance

Is this an actual element, or are you manipulating a string before adding it to the DOM? — David Thomas
– David Thomas, Commented Apr 1, 2012 at 19:12
@DavidThomas - as you can see from the reference to document.body.innerHTML in their code it's the actual page DOM. — jfriend00
– jfriend00, Commented Apr 1, 2012 at 19:23

jfriend00 · Accepted Answer · 2012-04-01 20:29:23Z

2

Rather than messing with the entire page HTML directly (which whacks all event handlers and forces a browser reparse of the entire page and can be fooled by different browser's re-manufacture of the HTML), I would suggest this DOM manipulation:

$("td.percent").each(function() {
    if (this.innerHTML == "69") {
        this.innerHTML = '<span class="bar" style="width:69%;"></span>';
    }
});

If you want the style width to be taken from the HTML directly and use any value you find there, then you can do it like this:

$("td.percent").each(function() {
    var widthVal = this.innerHTML;
    this.innerHTML = '<span class="bar" style="width:' + widthVal + '%;"></span>';
});

edited Apr 1, 2012 at 20:29

answered Apr 1, 2012 at 19:15

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

user1306706 Over a year ago

I think your on to something however I need to get the width from the content of the td.percent. Can this be done?

jfriend00 Over a year ago

@user1306706 - Based on your comment - I added a second option that gets the width percentage from the previously existing HTML.

jfriend00 Over a year ago

@user1306706 - there was a typo (an extra paren) in the second example that I fixed.

Panagiotis · Accepted Answer · 2012-04-01 19:25:06Z

1

Is $foo fixed? Why don't you use regular expressions?

var str = document.body.innerHTML;
var pattern = /($foo)/gim;
str.replace(pattern, "<span class=\"bar\" style=\"width:$1%\"></span>");

answered Apr 1, 2012 at 19:25

Panagiotis

1,5671 gold badge15 silver badges28 bronze badges

Comments

HBP · Accepted Answer · 2012-04-01 19:25:50Z

1

Use a RegExp to search and replace as follows:

function replaceScript () {
  var toReplace = /<td class="percent">(\d+)<\/td>/g;
  var replaceWith ='<td class="percent"><span class="bar" style="width:$1%"></span>  </td>';
  document.body.innerHTML = document.body.innerHTML.replace (toReplace, replaceWith);
}

answered Apr 1, 2012 at 19:25

HBP

16.1k6 gold badges30 silver badges34 bronze badges

Comments

The Alpha · Accepted Answer · 2012-04-01 19:56:26Z

1

Using plain javascript

function replaceScript()
{
    var tbl=document.getElementsByTagName('table');
    for(var t=0;t<tbl.length;t++)
    {
        var cols=tbl[t].getElementsByTagName('TD');

        for(var i=0;i<cols.length;i++)
        {
            if(cols[i].className=="percent")
            {
                var span=document.createElement('span');
                span.className="bar";
                span.innerHTML=cols[i].innerHTML; // if you want to populate the span with td's data/innerHTML, otherwise remove this line
                span.style.width=cols[i].innerHTML+'%';
                cols[i].innerHTML='';
                cols[i].appendChild(span);   
            }
        }
    }
}

Here is an example.

Edit Or may be this one

function replaceScript()
{
    var tbl=document.getElementsByTagName('table');
    for(var t=0;t<tbl.length;t++)
    {
        var cols=tbl[t].getElementsByTagName('TD');
        for(var i=0;i<cols.length;i++)
        {
            if(cols[i].className=="percent")
            {
                var spanData=cols[i].innerHTML;
                cols[i].innerHTML='<span class="bar" style="'+cols[i].innerHTML+'%">'+spanData+'</span>';

            }
        }
    }
}

Here is an example.

edited Apr 1, 2012 at 19:56

answered Apr 1, 2012 at 19:50

The Alpha

147k30 gold badges294 silver badges313 bronze badges

6 Comments

jfriend00 Over a year ago

Might have to be careful if there might ever be other class names on the same object with "percent". Any reason you didn't use getElementsByClassName()?

The Alpha Over a year ago

I think it's not supported by all browsers (if I'm not wrong).

jfriend00 Over a year ago

I either use a selector library like Sizzle or the selector in jQuery or use a shim for getElementsByClassName(). Browser compatibility for it is here: caniuse.com/getelementsbyclassname. All save lots of coding and mistakes.

The Alpha Over a year ago

It's true, anyway, don't you consider that IE8 is still being used and it has no support for this method so may be we should not rely on className method only for this (IE8).

jfriend00 Over a year ago

I said I would use either a library like Sizzle or jQuery that solves the compatibility problem or I'd use a shim for getElementsByClassName() that solves it. My answer to this question uses jQuery because the OP tagged the question with jQuery.

|

Collectives™ on Stack Overflow

Javascript find and replace with variables

4 Answers 4

3 Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related