JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="slides">
      <li><div class="flex-caption"><strong>Climb to the Top of Your Potential</strong>&nbsp;</div></li>
      <li><div class="flex-caption"><strong>Reach for the Clouds with Simple Solutions</strong>&nbsp;</div></li>
    <li><div class="flex-caption"><strong>Reach for the Clouds with Simple Solutions</strong>&nbsp;</div></li>
      <li><div class="flex-caption"><strong>Obtain the Courage to Suceed as a Leader, Team, &amp; Company</strong>&nbsp;</div></li>
</ul>

JavaScript

// This works perfect to search & replace text strings, but not for searching HTML:

jQuery(document).ready(function(){
function makeLink () {
jQuery(".flex-caption").html(function(i, str) {
return str.replace("Climb to the Top of Your Potential", "<div class='caption-align'>Climb to the Top of <a href='http://google.com'>Your Potential</a></div>");
});
}makeLink();
});

// Issue #1: This is my failed attempt to search & replace a large portion of the string:

jQuery(document).ready(function(){
function changeString () {
jQuery(".flex-caption").parent().html(function(i, str) {
return str.replace('<div class="flex-caption"><strong>Reach for the Clouds with Simple Solutions</strong>&nbsp;</div>', "<div class='flex-caption flex-align'><strong><div class='caption-align caption-right'>REPLACED TEXT! Reach for the Clouds with Simple Solutions</div></strong>&nbsp;</div>");
});
}changeString();
});

// Issue #2: I don't know why the character "&" is break this, so I tried \u0026 & both CDATA with no avail:

jQuery(document).ready(function(){
function changeString2 () {
jQuery(".flex-caption").html(function(i, str) {
return str.replace("<strong>Obtain the Courage to Suceed as a Leader, Team, &amp; Company", "<i>Obtain the Courage to Suceed as a Leader, Team, &amp; Company");
});
}changeString2();
});