Replace HTML using regular expressions - jQuery

Question

I am making a website using a CMS. My client wants certain characters such as backslashes and quotations to have a different colour to the rest of the paragraph so in order to make it easy for him I want to find them and replace them with the correct inline styles. My code all works individually but I cannot get it to run together. Only the last action in the script seems to be executing (workContentCloseQuote).

https://jsfiddle.net/n654kvdp/4/

$('.right-entry p').each(function() {
    var workContentBackslash = $(this).text();
    var workContentOpenQuote = $(this).text();
    var workContentCloseQuote = $(this).text();

    workContentBackslash = workContentBackslash.replace(/\//g, "<span style='color: red;'>/</span>");
    workContentOpenQuote = workContentOpenQuote.replace(/“/g, "<span style='color: red;'>“</span>");
    workContentCloseQuote = workContentCloseQuote.replace(/”/g, "<span style='color: red;'>”</span>");

    $(this).html(workContentBackslash);
    $(this).html(workContentOpenQuote);
    $(this).html(workContentCloseQuote);
});

<div class="right-entry">
    <header class="entry-header">
        <h1 class="entry-title">OKO</h1>
    </header>
    <div class="spacer">-</div>
    <p>branding / posters / responsive website / stationery / marketing / infographics</p>
    <p>Jeremy asked me to re-brand his company after I designed a set of book covers for him. I created a fresh new logo, colour ways and brand guidlelines along with a shiny new responsive site, posh stationery, office posters, twitter theme, etc. Visit the site oko.agency</p>
    <p>“Intuitive, intelligent and attractive design from an innovative creative. Simon takes the time to understand the brand, the business challenge and then delivers a creative solution within budget and timescale. What more could you ask for”.</p>
    <p>Jeremy Rix</p>
</div>

Answer 1

You are overwriting each change with the following change. Try this instead:

$('.right-entry p').each(function() {
    var text = $(this).text();

    text = text.replace(/\//g, "<span style='color: red;'>/</span>");
    text = text.replace(/“/g, "<span style='color: red;'>“</span>");
    text = text.replace(/”/g, "<span style='color: red;'>”</span>");

    $(this).html(text);
});

Additionally, you can replace a whole set of characters with one expression:

text = text.replace(/[\/“”]/g, "<span style='color: red;'>/</span>");

Answer 2

html method resets the html content of the element. You should chain the replace calls and modify the same string. You could also use the html method's callback function:

$('.right-entry p').html(function(_, currentHTML) {
   return currentHTML.replace(/([\/“”])/g, "<span class='red'>$1</span>");
});

https://jsfiddle.net/yxL9okot/

Answer 3

If you use .html() it will replace the contents of whatever element you're targeting. In your case, it can be simplified to just the following:

$('.right-entry p').each(function() {
    this.innerHTML = this.innerHTML.replace(/([\/“”])/g, "<span style='color: red;'>$1</span>");
});