Javascript查找和替换变量

Question

我几乎在那里感谢stackoverflow用户的帮助。我只需要更多的帮助。

我有一个动态生成的数据表，我不能改变视图的HTML页面。它返回的是这样的：

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

，我需要做的是查找和替换：

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

有了：

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

正如我说，我几乎没有和具有替代只是工作而不是变量值。

我现在拥有的一切：

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

你能帮忙吗？提前

Answer 1

而不是直接整个页面的HTML搞乱（这敲敲罢了所有事件处理程序，并迫使整个页面的浏览器重新分析，并且可以通过HTML的不同浏览器的再制造上当）

谢谢，我建议这个DOM操作：

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

如果你想要的样式宽度从HTML直接采取并使用任何价值，你发现有，那么你可以做这样的：

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

Answer 2

$ foo是否已修复？你为什么不使用正则表达式？

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

Answer 3

使用正规搜索和替换如下：

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

Answer 4

使用普通的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); 
      } 
     } 
    } 
} 

这里是一个example。

编辑或可能是这一个

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

      } 
     } 
    } 
} 

这里是一个example。