title: JS highlight matched content x times
body: <h2>How can you highlight x occurrences</h2>
  
  <p>How can you highlight, in pure JS only, a limited subset of matches from a set of text so that only x number of highlights occur per match. </p>
  
  <pre><code>var matches = new Array('fox', 'dog');
  var MaxHighlights = 2;
  </code></pre>
  
  <h2>Original content</h2>
  
  <p>The quick brown fox jumps over the lazy dog but the lazy dog is quick of the mark to catch the brown fox. In general the fox versus the dog is not a good match.</p>
  
  <h2>Highlighted content</h2>
  
  <p>The quick brown <strong>fox</strong> jumps over the lazy <strong>dog</strong> but the lazy <strong>dog</strong> is quick of the mark to catch the brown <strong>fox</strong>. In general the fox versus the dog is not a good match.</p>
  
  <hr>
  
  <p><em>For extra points I'd preferably only highlight one match per sentence.</em></p>
  
  <h2>Preferred Highlighted content</h2>
  
  <p>The quick brown <strong>fox</strong> jumps over the lazy <strong>dog</strong> but the lazy dog is quick of the mark to catch the brown fox. In general the <strong>fox</strong> versus the <strong>dog</strong> is not a good match.</p>
  
  <p>I was using this is a base for my highlighting attempts 
  <a href="http://www.the-art-of-web.com/javascript/search-highlight" rel="nofollow">http://www.the-art-of-web.com/javascript/search-highlight</a></p>