title: jQuery replace array of words in a string
body: <p>I am trying to "highlight" specific words in a string after the string has been created.</p>
  
  <p>I'm doing this currently:</p>
  
  <pre><code>var keywords = [
      "Monday",
      "monday",
      "Tuesday",
      "tuesday",
      "Wednesday",
      "wednesday",
      "Thursday",
      "thursday",
      "Friday",
      "friday",
      "Saturday",
      "saturday",
      "Sunday",
      "sunday"
      ];    
  
  function highlightImportant(that) {
      that.find('.email-container').each(function(){
          var full_text = $(this).text();
          $.each(keywords, function(i){
              full_text = full_text.replace(keywords[i], "&lt;b&gt;"+keywords[i]+"&lt;/b&gt;");
              $(this).text(full_text);
          });
      });
  }
  </code></pre>
  
  <p>this function is called at the end of this:</p>
  
  <pre><code>function getEmails(email, name) {
      console.log("working...");
      $('.contact--details__show__emails').empty();
      $.post('php/contacts-get-email.php', {email:email}, function(data) {
          var email_body = data.split("&lt;:&gt;");
          $.each(email_body.reverse(), function(i){
              if(email_body[i]) {
                  var direction = email_body[i].split(':dir:')[0];
                  var email_text = email_body[i].split(':dir:')[1].split(':date:')[0];
                  var email_date = email_body[i].split(':dir:')[1].split(':date:')[1];
                  var d = new Date(0);
                  d.setUTCSeconds(email_date);
                  if(direction === "TO"){
                      var initial = "Us"; 
                  } else {
                      var initial = name; 
                  }
                  var email_block = $('&lt;div class="emailBlock dir-'+direction+'" style="opacity:0;"&gt;\
                                      &lt;div class="avatar"&gt;'+ initial +'&lt;/div&gt;\
                                      &lt;div class="email-container"&gt;'+email_text+'&lt;/div&gt;\
                                      &lt;div class="date"&gt;'+d+'&lt;/div&gt;\
                                  &lt;/div&gt;');
                  $('.contact--details__show__emails').append(email_block);
                  email_block.delay(100*i).animate({"opacity":"1"}, 500);
                  highlightImportant($('.contact--details__show__emails'));
              }
          }); 
      }); 
  }
  </code></pre>
  
  <p>This seems like it should work, and when I <code>console.log</code> the event, I see it running through each keyword for every container, but it seems it's not finding the keywords even when they exist. </p>
  
  <p>What I'd like to see happen is when I have a string like this:</p>
  
  <pre><code>var string = "Let's meet Monday or Tuesday";
  </code></pre>
  
  <p>I'd like to have them turn bold, like so:</p>
  
  <p>"Let's meet <strong>Monday</strong> or <strong>Tuesday</strong>"</p>
  
  <p>Any thoughts?</p>