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。