title: Javascript find and replace with variables
body: <p>I'm almost there with something thanks to the help of stackoverflow users. I just need a bit more help with this one. </p>
  
  <p>I have a HTML page with a dynamically generated table of data which I cannot alter view. It's returned like this:</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td class="name"&gt;foo&lt;&lt;/td&gt;
  &lt;td class="time"&gt;5:36:13&lt;/td&gt;
  &lt;td class="avtime"&gt;0:09:36&lt;/td&gt;
  &lt;td class="transcripts"&gt;0&lt;/td&gt;&lt;td class="views"&gt;35&lt;/td&gt;
  &lt;td class="percent"&gt;100&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>What I need to do is find and replace:</p>
  
  <pre><code>&lt;td class="percent"&gt;$foo&lt;/td&gt;
  </code></pre>
  
  <p>With:</p>
  
  <pre><code>&lt;td class="percent"&gt;&lt;span class="bar" style="width:$foo%"&gt;&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>As I say I was almost there and have replacements working just not with variable values. </p>
  
  <p>What I have now:</p>
  
  <pre><code>function replaceScript() {
  var toReplace = '&lt;td class="percent"&gt;69&lt;/td&gt;';
  var replaceWith ='&lt;td class="percent"&gt;&lt;span class="bar" style="width:69%"&gt;&lt;/span&gt;  &lt;/td&gt;';
  document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
  }
  </code></pre>
  
  <p>Can you help?</p>
  
  <p>Thanks in advance</p>