JSFiddle - React, Tailwind, and code Playground

by Kato Richardson

HTML

<ul id="definitions">
    <li id='id1'>keyword1</li>
    <li id='id2'>keyword2</li>
    <li id='id3'>keyword3</li>
</ul>

<div id="html">Lorem ipsum keyword1 dolor keyword2 sit keyword3 amet, consectetur adipisicing elit, sed do eiusmod tempor</div>

CSS

#definitions { display: none; }

a { background-color: #ffc; text-decoration: none; }

JavaScript

jQuery(function($) {
    
    // created by Gracenotes
    // http://goo.gl/MTkcY
    RegExp.quote = function(str) {
       return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");
    };

    var $node = $('#html'),   // the dom element
        html  = $node.html(); // the text we'll manipulate
    
    $('#definitions li').each(function() {
        var $this   = $(this),
            //I didn't know where defid came from
            //so I just added it as id attribute
            defid   = $this.attr('id'), 
            deftext = $(this).text(), //the keyword
            pattern = new RegExp('\\b(' + RegExp.quote(deftext) + ')\\b', 'gi');
        html = html.replace(pattern, '<a href="#id=' + defid + '">$1</a>');
    });
    
    // replace the dom content with our updated text
    $node.html(html);

});