JSFiddle - React, Tailwind, and code Playground

by paska

JavaScript

$.fn.range = function(start, end) {
    //The function must be called by first time with an element which (.htm() == .text())
    if($(this).html() == $(this).text()) { //.range was never called with this element
        //Split each char in a different span
        var html = $(this).html();
        $(this).empty();
        for(var i = 0; i < html.length; i++) {
            $(this)[0].appendChild(document.createTextNode(html.substr(i, 1)));
        }
    }
    if(start == undefined)
        return $(this);
    
    if(end == undefined)
        end = html.length;
    
    var contents = $(this).contents();
    return contents.filter(function() {
        var eq = contents.index($(this));
        return (eq > (start - 1) && eq < (end + 1));
    });
};


var $el = $('<div>a b c d</div>');

console.log($el.html()); // a b c d

$el.range(2,3).wrap('<strong>');
console.log($el.html()); // a <strong>b</strong> c d

$el.range(4,5).addClass('super');
$el.range(4,5).addClass('awesome');
console.log($el.html()); // a <strong>b</strong> <span class="super awesome">c</span> d

$el.range(2,5).addClass('shweet');
console.log($el.html()); // a <span class="shweet"><strong>b</strong> <span class="super awesome">c</span></span> d

$el.range(); // returns the selected partial element (aka range)

alert($el.html());