title: Bold key words within an unordered list
body: <p><a href="http://jsfiddle.net/feh9ngva/" rel="nofollow noreferrer">Please see relevant jsFiddle</a></p>
  <p>I have a list here where I want to make every word that says 'Bold' bold.</p>
  <pre><code>&lt;ul id = &quot;list&quot;&gt;
      &lt;li&gt;Make this word Bold&lt;/li&gt;
      &lt;li&gt;Bold this as well&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>$('#list li').each(function () {
                  var text = $(this).text();
                  var value = 'bold';
       
                  if (text.toLowerCase().indexOf(value) &gt; -1) {
                      var html = $(this).html();
                      $(this).html(html.replace(value, &quot;&lt;span id='highlight' style='font-weight: bold'&gt;&quot; + value + &quot;&lt;/span&gt;&quot;));
                  }
  
              });
  </code></pre>
  <p>So the output would be:</p>
  <blockquote>
  <p>Make this word <strong>Bold</strong></p>
  <p><strong>Bold</strong> this as well</p>
  </blockquote>
  <p>How can I fix my code?</p>