JSFiddle - React, Tailwind, and code Playground

HTML

<span>:) </span>

<code>:)</code>

JavaScript

var searchText = function(parentNode, regex, callback, skipElements) {

    skipElements = skipElements || ['script', 'style'];

    var node = parentNode.firstChild;

    do {

        if (node.nodeType == 1) {

            var tag = node.tagName.toLowerCase();

            if (~$.inArray(tag, skipElements)) {
                continue;
            }

            searchText.call(this, node, regex, callback);

        } else if (node.nodeType == 3) {
            while (true) {

                // Does this node have a match? If not, break and return. 
                if (!regex.test(node.data)) {
                    break;
                }

                node.data.replace(regex, function(match) {

                    var args = $.makeArray(arguments),
                        offset = args[args.length - 2],
                        newTextNode = node.splitText(offset);

                    callback.apply(window, [node].concat(args));
                    newTextNode.data = newTextNode.data.substr(match.length);
                    node = newTextNode;

                });
            }
        }
    } while (node = node.nextSibling);
};

searchText($('body')[0], /:\)/, function(node, match) {
    var img = $('<img />')[0];
    img.src = 'http://www.gravatar.com/avatar/80200e1488ab252197b7f0f51ae230ef?s=32&d=identicon&r=PG';
    img.alt = match;
    node.parentNode.insertBefore(img, node.nextSibling);
}, ['code']);