jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="code">
  <p>X 
  
  only X or x
   
   in a wordx orX  maybexmaybe mayXmay
</p>
</div>

CSS

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

JavaScript

$(document).ready(function(){
    $(".code").children().each(function() {
        $(this).html($(this).html().replace(/\b\x\b/g, "<font color=red>x</font>"));
        $(this).html($(this).html().replace(/\b\X\b/g, "<font color=red>X</font>"));
        $(this).html($(this).html().replace(/\b\y\b/g, "<font color=red>y</font>"));
        $(this).html($(this).html().replace(/\b\Y\b/g, "<font color=red>Y</font>"));
    });
})