Replace content in elements without replacing HTML
With jQuery this could be achieved rather simply. Create a function that takes the element you wish to update the text of, the text you wish to replace and what you wish to replace it with. Then in the function you want to remove the child HTML and update any text left in the element with your replacement text. Then you can recursively run this same function for each of your child elements before appending them back into the parent.
function replaceTextInHtmlBlock($element, replaceText, replaceWith)
{
var $children = $element.children().detach();
//Now that there should only be text nodes left do your replacement
$element.html($element.text().replace(replaceText, replaceWith));
//Run this function for each child element
$children.each(function(index, me){
replaceTextInHtmlBlock($(me), replaceText, replaceWith);
});
$element.append($children);
}
$(document).ready(function(){
$("#doReplace").click(function(){
replaceTextInHtmlBlock($("#top"), $("#replace").val(), $("#with").val());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
<div>
This is a test
</div>
<div>
This is another test
<button>
Button test
</button>
</div>
</div>
<br />
<br />
<div>
<label>Replace</label>
<input id="replace" value="t" />
<label>with</label>
<input id="with" value="<strong>t</strong>" />
<button id="doReplace">Do Replace</button>
</div>