title: How to made a multi-lang webpage with JSON and vanilla JavaScript
body: <p>I would like to made way to translate a webpage using JSON files and vanilla JS functions.</p>
  
  <p>I have these 2 files:</p>
  
  <p><em>index.htm</em></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;!-- blah blah blah --&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt; &lt;var&gt;GLOBAL.CONTENT.SAMPLE_TEXT&lt;/var&gt; &lt;/h1&gt;
          &lt;h2&gt; &lt;var&gt;OTHER.TEST.TEST&lt;/var&gt; &lt;/h2&gt;
          &lt;p&gt;
              &lt;i&gt; &lt;var&gt;GLOBAL.CONTENT.LOADING&lt;/var&gt; &lt;/i&gt;
          &lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>en.json</em></p>
  
  <pre><code>{
      "global": {
          "content": {
              "loading": "Loading...",
              "sample_text": "Lorem ipsum dolor sit amet.",
          }
      },
      "other": {
          "test": {
              "test": "THIS IS A TEST"
          }
  }
  </code></pre>
  
  <p>I already know how to parse the JSON to a <code>new Object</code> variable and how to access to every variable.
  But what I don't know is how to made every <code>&lt;var&gt;&lt;/var&gt;</code> to replace its actual content with its corresponding path, example:</p>
  
  <pre><code>&lt;h1&gt; &lt;var&gt;GLOBAL.CONTENT.LOADING&lt;/var&gt; &lt;/h1&gt;
       _________________________________
                       |
                       V
              &lt;h1&gt; Loading... &lt;/h1&gt;
  </code></pre>
  
  <p>And so on... Thanks in advance.</p>