JSFiddle - React, Tailwind, and code Playground

HTML

<p>hello everyone. just testing <div>this feature</div></p>

CSS

span { color: red }

code { margin-top: 20px; display: block }

JavaScript

// PLUGIN CODE
$.fn.wrapSides = function () {
    return this.each( function (index, el) {
       var $parent = $(el).parent(),
           contents = $.makeArray($parent.contents()),
           before, after, i, matched, build = $();
        
        for (i = 0; i < contents.length; i++) {
            if( contents[i] === el) {
                before = contents.slice(0, i);
                after = contents.slice( Math.min(contents.length - 1, i + 1), contents.length);
                matched = contents.slice(i,i + 1);
                break;   
            }
        };
        
        if (before && before.length) {
            build = build.add($("<a href='#'  style=''>").append(before));
        }
        
        build = build.add(matched);
        
        if (after && after.length) {
            build = build.add($("<a href='#'  style=''>").append(after));
        }
        
        $parent.html( build );
    }); 
};

// PAGE CODE

$("div").wrapSides();

$("body").append($("<code>", {
    text: "Generated Code: <p>" + $("p").html() + "</p>"
}));