title: Simple replace with user input in JavaScript
body: <p>I'm trying to make a 'find and replace' function that takes both values (replaced and replacement) from <code>Form</code> element and then replaces all occurances of 'replaced' inside DIV. After that I want it to display an alert with a replaced words count.
  Tried to get there with the <code>for</code> loop, but something went wrong. Going with plain JS, I'm way too novice to get into jQuery.</p>
  
  <pre><code>function wordReplace()
  {
      var replaced = document.getElementById('replaced').value.toLowerCase;
      var replacement = document.getElementById('replacement').value;
      var workArea = document.getElementById('main').innerHTML;
      for (var r=0; r&lt;workArea.lenght; r++)
      {
          if (workArea[r].value.toLowerCase == 'replaced')
          {
              workArea[r].value.replace('\breplaced', 'replacement')
              alert(workArea[r].value.replace('replaced', 'replacement').length)
          }
      }
  }
  </code></pre>
  
  <p>And that's my form code, just in case: (ignore <code>&lt;input type="submit" onclick="replacerHide();"/&gt;</code> - it's for different function and it works for now)</p>
  
  <pre><code>&lt;form&gt; 
     &lt;label for="replaced" class="labelInline"&gt;Słowo szukane&lt;/label&gt;
     &lt;input type="text" name="replaced" id="replaced"/&gt;
     &lt;label for="replacement" class="labelInline"&gt;Zamiennik&lt;/label&gt;
     &lt;input type="text" name="replacement" id="replacement"/&gt;             
     &lt;input type="submit" onclick="replacerHide();"/&gt;         
  &lt;/form&gt;      
  </code></pre>
  
  <p>I've read here (in a similliar question of mine) that I should get familliar with <code>regex</code> and I did. But have no faintest idea how to apply it to solve my problem. I'm pretty sure I'm onto something with <code>for</code> loop here, but other than that I'm empty :/</p>
  
  <p>All and any help will be GREATLY appreciated.</p>
  
  <p><strong>EDIT - CORRECTED FULLY WORKING CODE</strong></p>
  
  <pre><code>function wordReplace()
      {
          var div = document.getElementById('main');
          var find = document.getElementById('replaced').value;
          var replace = document.getElementById('replacement').value;
  
          var re_Find = new RegExp(find, 'gi');
          var matches = div.innerHTML.match(new RegExp(find, 'gi'));
  
          if (matches) 
              {
                  div.innerHTML = div.innerHTML.replace(re_Find, replace);
              }
  
              matches = matches ? matches.length : 0;
              alert(matches);
       }
  </code></pre>
  
  <p>and for the <code>Form</code></p>
  
  <pre><code>&lt;div id="form"&gt;
          &lt;form id="formularz"&gt; 
              &lt;label for="replaced" class="labelInline"&gt;Słowo szukane&lt;/label&gt;
              &lt;input type="text" name="replaced" id="replaced"/&gt;
              &lt;label for="replacement" class="labelInline"&gt;Zamiennik&lt;/label&gt;
              &lt;input type="text" name="replacement" id="replacement"/&gt;                
              &lt;button onclick="replacerHide(); wordReplace();"&gt;Podmień!&lt;/button&gt;  
          &lt;/form&gt;
  </code></pre>
  
  <p>Now it's working as it is supposed to :)</p>