title: Javascript replace "variables" in HTML code faster
body: <p>I'm building a multi-language single page website with javascript and the new html <code>template</code>-tag and would like to use own variables like <code>{{txt.welcome}}</code> in html which should be replaced by the translation.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h2&gt;{{heading.hello}}&lt;/h2&gt;
    &lt;p&gt;{{txt.welcome}}&lt;br /&gt;&lt;img alt="{{image.description}}" src="" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var reg = new RegExp(/{{([a-z.]+)}}/g);
  var result;
  while(result = reg.exec(document.documentElement.innerHTML)) {
      document.documentElement.innerHTML = document.documentElement.innerHTML.replace(result[0], translations[result[1]]);
  }
  </code></pre>
  
  <p>It searchs for the variables in the whole document and replace them with the defined text, but with many variables the performance becomes really bad.</p>
  
  <p>What would be a faster solution than looping with regex over the whole document's html?</p>
  
  <p>How do it other libraries <a href="http://angular-translate.github.io/docs/#/guide" rel="nofollow">like AngularJS</a> with <code>{{ 'FOO' | translate }}</code>?</p>