JSFiddle - React, Tailwind, and code Playground

by zluiten

HTML

<ul id="definitions">
    <li id="defid63">keyword1<input type="hidden" value="63" /></li>
    <li id="defid61">keyword2<input type="hidden" value="61" /></li>
    <li id="defid62">Keyword3<input type="hidden" value="62" /></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 defid = $(this).find('input').val();
        //var deftext = $(this).html().split("<input")[0]; <- ugly, and case senstive :(
        var deftext = $(this).html().replace(/<.*?>/g, '');
            //the keyword
        var 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);

});