How to change only a Letter in Column with JS (SP2013)

Question

I´m using a Custom List for our Shift Schedule and i´m coloring some Words for a better Overview:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('Holiday'), td.ms-cellstyle.ms-vb2:contains('Gleitzeit')");
$Text.css({"color": "red", "font-weight": "bold"});
$Text = $("td.ms-cellstyle.ms-vb2:contains('Illness')");
$Text.css({"color": "red", "font-weight": "bold"});
});

</script>

This is working fine for me. (I Think it´s possible to combine Holiday and Illness, but i don´t know how)

I also have the Oncall Shift "Oncall (O)" and i´m trying to only bold the (O). But i have no Idea how i have to change my Code:

$Text = $("td.ms-cellstyle.ms-vb2:contains('(O)')");
$Text.css({"color": "red", "font-weight": "bold"});

In this Case the whole cell is Bold Onall (O)

Do you have any Ideas for me to change only the (O) in the cell?

Answer 1

Get the content (html) from your cell, replace the (O) with something bold... i.e. insert in your code (untested!):

var html = $Text.html();
html = html.replace('(O)', '<span style="color: red; font-weight: bold;">(O)</span>'
$Text.html(html);

Answer 2

I would suggest make use of JSLink's postRedering method. That way it should work for paged data. Here's an example (tested :-))

//Namespace: SharePoint Stack Exchange
var SSE = SSE || {};
SSE.ShiftScheduleView = (function () {
    return {
        formatText: function (ctx) {
            var pattern = /Holiday|Gleitzeit|Illness|(\(O\))/ig;

            $("td.ms-cellstyle.ms-vb2").each(function () {
                var html = $(this).html();
                html = html.replace(pattern, function replacer(match) {
                    return '<strong style="color: red">' + match + '</strong>';
                });
                $(this).html(html);
            });
        }
    };
})();

//This function registers our JS with the view rendering.
(function () {
    var templateOverrideInfo = {};
    templateOverrideInfo.Templates = {};

    //This registers our JS to run after the view has been rendered. 
    templateOverrideInfo.Templates.OnPostRender = SSE.ShiftScheduleView.formatText;

    //Specify View & ListTemplated Id  that you want to target.
    templateOverrideInfo.BaseViewID = 1;
    templateOverrideInfo.ListTemplateType = 100;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(templateOverrideInfo);
})();