JSFiddle - React, Tailwind, and code Playground

by Zesky See

HTML

<p>dress 1, dress 2, dress 3, dress 4, dress 5, dress 6, dress 7.</p>

JavaScript

(function ($) {
    $.fn.replacetext = function (target, replacement, max) {
        var limit = max || -1;

        var $textNodes = this.find("*")
            .andSelf()
            .contents()
            .filter(function () {
            return this.nodeType === 3 && !$(this).parent("a").length;
        });

        $textNodes.each(function (index, element) {
            var $element = $(element);
            var value = $element.text();
            // Find maximum random number
            var ranMax = value.match(target).length

            // Generate random number
            var arr = []
            while (arr.length < max) {
                var randomnumber = Math.ceil(Math.random() * ranMax)
                var found = false;
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == randomnumber) {
                        found = true;
                        break;
                    }
                }
                if (!found) arr[arr.length] = randomnumber;
            }

            var nth = 0;
            value = value.replace(target, function (match, i, original) {
                nth++;
                return jQuery.inArray(nth, arr) > -1 ? 
                    match.replace(target, replacement) : 
                    match;
            });

            $element.replaceWith(value);

        });
    };
})(jQuery);

$("p").replacetext(/\bdress\b/gi, "<a href='http://www.google.com'>$&</a>", 3);