Javascript変数を見つけて置き換えます

Question

私はstackoverflowユーザーの助けを借りて何かを持っています。私はちょうどこれにもう少し助けが必要です。

私はビューを変更することができない動的に生成されたデータテーブルを持つHTMLページを持っています。それは、次のように返されています：

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

で：

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

私はほとんどなかった言うように、ちょうど作業代替品を持って、私は検索と置換されて行う必要がある何

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

可変値ではありません。

私が今持っている：

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

ではなく（すべてのイベントハンドラをwhacksし、ページ全体のブラウザの再解析を強制し、HTMLの異なるブラウザの再製造にだまさすることができます）直接、ページ全体のHTMLをいじりで

おかげで、あなたがスタイルの幅が直接HTMLから撮影したい場合は

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

、あなたがそこに見つけるの任意の値を使用して、あなたはこのようにそれを行うことができます：私はこのDOM操作をお勧めし

$("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

ここでは、プレーンジャバスクリプトに

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です。

編集かはここでは、この1

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あるかもしれません。