title: Count Specific Words Using Jquery
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;apples &lt;span id="apples-density"&gt;1&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;pears &lt;span id="pears-density"&gt;0&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;oranges &lt;span id="oranges-density"&gt;2&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;textarea&gt;This is where I love to eat apples and oranges&lt;/textarea&gt;
  &lt;textarea&gt;I also like oranges on Sundays!&lt;/textarea&gt;
  </code></pre>
  
  <p>What I would to achieve is that when ever the textarea is updated (on key up), the density of the 3 specific words is counted and then the value inside the SPAN is updated.</p>
  
  <p>However, the page can contain up to 10 words that will need to be counted and also an unlimited number of TEXTAREA elements.  And... the actual 3 words that are being counted are different each time, so the code has to allow for some sort of automation.</p>
  
  <p>I can sort of see how it should work in my head, but not quite how to implement...</p>
  
  <ol>
  <li>perform a jquery .each on the textarea values.</li>
  <li>perform a jquery to grab each of the <code>&lt;li&gt;</code> values</li>
  <li>so some sort of regex to match the content of the textarea's and count the words.</li>
  <li>update the .text of the correct  to show the value.</li>
  </ol>