JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page" id="page1">
    <img src="http://www.magickeys.com/books/noblegnarble/2.jpg" />
    <p class="story">   
        Far below the ocean waves, a gnarble lay in bed, all night long his gnarble dreams kept swimming in his head.
    </p>
</div>

CSS

img { display:block; margin:0 auto; }
.page {width:100%; height:500px;}
.page img {width:80%; height:auto;}
p.story {width:80%; margin:20px auto;}

JavaScript

var w = ['ocean','waves','bed', 'swimming'];
    $.each(w,function(i,w) {

       jQuery('.story').html(function(i,val) {
            console.log(w);
        val = val.replace(w,'<a href="" class="' + w + '">' + w + '<\/a>');
         
            return val;
    });
        
    });