Looking to replace specific words in HTML content within <div> and <p> tags upon page load. Utilizing angularJS to achieve this task.
This is my current function:
var elementsList = e.find('p');
var regex = ('[^<>\\n]*?\\b(Cat|Dog|Fish)\\b[^<>\\n]*?', 'gi');
angular.forEach(elementsList, function(_element){
var eHtml = $(_element).html();
e.html(eHtml .replace(regex, function(fullMatch, match){
if(angular.isString(match))
{
return 'TEST' + match;
}
}));
$compile($(_element).html())($scope);
});
$compile(e.contents())($scope);
However, I'm facing an issue where the HTML is not being updated correctly. Instead of just replacing the matched word, it replaces the entire sentence.
For instance, if the original HTML is:
<p>I am a dog.</p>
<p>I am a cat.</p>
<p>I am not a dog but a cat.</p>
I want the desired output to be:
<p>I am a TESTdog.</p>
<p>I am a TESTcat.</p>
<p>I am not a TESTdog but a TESTcat.</p>