JSFiddle - React, Tailwind, and code Playground

by rsta

HTML

<strong>Paul</strong> Bacon ipsum dolor sit amet cow hamburger capicola shankle shoulder tail turducken leberkas pig pork loin Ringo ball tip ham hock sausage. <strong>Pork</strong> chop drumstick ham hock ham ground round leberkas tenderloin. Porchetta doner biltong ham hock beef filet mignon. Landjaeger porchetta swine, ribeye chicken beef brisket John bresaola ground round ham hock corned beef rump short loin capicola sirloin. Meatball pork loin leberkas, rump boudin short ribs ground round kielbasa. Salami porchetta jerky shank cow venison, beef ribs sirloin flank andouille rump. Jerky shankle t-bone pork loin chuck prosciutto tongue pancetta beef pork belly ham hock sirloin jowl venison short ribs. Pig ringo chuck flank, john capicola beef ball tip ribeye short loin porchetta. Pork filet mignon kevin biltong, turducken swine pastrami strip steak pork belly jowl rump cow. Bresaola tail landjaeger chicken shank. Filet mignon bacon bresaola sirloin, george strip steak pork loin spare ribs chicken pastrami frankfurter. Paul Landjaeger corned beef hamburger chicken meatball. Pork loin salami filet mignon boudin pastrami, chuck pork drumstick. Strip steak porchetta brisket pancetta leberkas beef turducken. Salami pastrami turkey andouille biltong. Fatback landjaeger sirloin pork chop corned beef George hamburger ground round sausage turducken ham flank. Shankle meatball sausage pork chop. John Pancetta ribeye sirloin venison. Pork loin pig sirloin filet mignon drumstick paul chicken spare ribs. Fatback spare ribs sausage turkey short ribs meatball swine jerky chuck. Jerky prosciutto ham hock tongue. Corned beef shankle kielbasa biltong george pig. Ribeye turkey brisket prosciutto, turducken pork chop venison beef ground round boudin paul chicken landjaeger short loin. Andouille shank cow beef ribs turducken corned beef. Tail tenderloin strip steak, doner drumstick sausage sirloin ball tip prosciutto fatback venison andouille beef bacon meatball. Does your lorem...

CSS

.word {
    color: red;
}

JavaScript

$.fn.wrapInTag = function (opts) {
    

    var tag = opts.tag || 'strong',
        words = opts.words || [],
        regex =  RegExp(words.join('|'), 'gi')  // case insensitive
        ,
        replacement = '<' + tag + ' class="word">$&</' + tag + '>';

    console.log(this.html);
    
    return this.html(function () {
       return $(this).html().replace(regex, replacement); // use .html instead of .text to keep original html tags in the output
    });
};

// list
var name_array = new Array('john', 'ringo', 'paul', 'george');

// Usage
$('body').wrapInTag({
    tag: 'span',
    words: name_array
});

/*
regex = "(?:?<!\\>)\\s*" + RegExp(words.join('|'), 'gi') + "\\s*(?:?!\\<)" // case insensitive

// negative look-behind for '>'
(?<!\>) 

//negative look-ahead for '<'
(?!\<)

// optional none or illimited whitespace
\s*
*/

/* ref
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript
*/