JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="breadcrumbs-inner">
            <a href="/">Home</a> <i class="fa fa-angle-right"></i>

                                                                                <a href="/services-for-you/" data-link="services-for-you" class="breadlinks">services <span class="smallcaps">for</span> you</a>
                                                                <i class="fa fa-angle-right"></i>
                                                                                                    <a href="/services-for-you/town-and-country-planning/" data-link="town-and-country-planning" class="current-breadcrumb-page breadlinks">Order Or country planning</a>
                                                        
        </div>

CSS

.smallcaps {
  text-transform: lowercase;
}

JavaScript

$(".breadlinks:contains('and')").html(function(_, html) {
    return  html.replace(/(and)/g, '<span class="smallcaps">$1</span>')
});