JQuery .replace function overlapping similar phrases
<p>I'm using the jQuery .replace function to turn all occurrences of certain words into links using this code:</p>

<pre><code>$.each($('p'), function(i,e) {
  $(e).html($(e).html().replace(/candy/g,'&lt;a href="http://www.rantlifestyle.com/wp-content/uploads/2014/06/First.jpg"&gt;candy&lt;/a&gt;'));
})
</code></pre>

<p>The problem is that some of the phrases contain the same letters, so when I have two that conflict, the words don't get replaced correctly. For instance, if I used this code as well as the code above:</p>

<pre><code>    $.each($('p'), function(i,e) {
      $(e).html($(e).html().replace(/can/g,'&lt;a href="https://thumbs.dreamstime.com/x/empty-tin-can-7151872.jpg"&gt;can&lt;/a&gt;'));
})
</code></pre>

<p>Then it tries to replace the letters 'candy' <em>and</em> 'can' with each link I've specified in the one occurrence of the word 'candy.'</p>

<p>Is there a way to specify that I want the replace function to work with specific phrases?</p>

<p>Side note, I tried to make a <a href="https://jsfiddle.net/cleo_not_chloe/bndeL2q6/" rel="nofollow noreferrer">simple example</a> of this on jsfiddle and it's not working. Maybe that has something to do with my issue?</p>

<p>Thanks!</p>