JSFiddle - React, Tailwind, and code Playground

HTML

<p>123 hello 123</p>
<p>Hello</p>
<p>neither</p>
<p>Goodbye</p>
<p>123 goodbye 123</p>

JavaScript

$('p').each( function(index)
{
    replaceWithColors( $(this) , "hello" , "blue" );
    replaceWithColors( $(this) , "goodbye" , "red" );
});

function replaceWithColors( object , word , color )
{
    var index = $(object).html().toLowerCase().indexOf( word );  
    
    if ( index > -1 )
    {
        var before = $(object).html().substring( 0 , index );
        var theWord = $(object).html().substring( index , index + word.length );
        var after = $(object).html().substring( index + word.length );
        
        $(object).html( before + "<span style='color:" + color + "'>" + theWord + "</span>" + after);
    }
}