I set up my page to dynamically wrap
<i> tags around a targeted keyword (string) on a title.
When I worked on the static parts of the website, I could manually wrap that word. But Some parts of the page will be generated by the server, so if the word appears in the title, I need it wrapped so that it shows up as italicized.
For the sake of an example, let's say that if the keyword is "cool" then it needs to be converted to
<i>cool</i> if it appears in a title, which in this case is class "exec-company"
<div class="exec-company"><?php the_field('company') ?></div>
Lets say the output was this HTML
<div class="exec-company">Cool company</div>
I followed along to this tutorial. Which advised on using jQuery and showed this sample
var oldString = 'john', newString = '<span>John</span>', newText = $('p').text().replace(RegExp(oldString,"gi"),newString); $('p').html(newText);
I modified to this so that it is always uppercase, and always italicized
var oldString = 'cool', newString = '<i>COOL</i>', newText = $('.exec-company').text().replace(RegExp(oldString,"gi"),newString); $('.exec-company').html(newText);
On codepen, I made a demo which produced this.
but wondering if this was the best way to approach this problem. Especially since the solution won't really scale well since the word is used site wide.