JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="content">
    <p>Lorem ipsum dolor sit amet, <a href="hejsa.html">consectetur</a> adipiscing elit. Nam eget lacinia mauris. Vestibulum aliquam lobortis dolor ut faucibus. Donec in pharetra nunc. Phasellus vestibulum lorem sit amet vulputate dapibus. Ut porta consequat pharetra. Nulla facilisi. Duis mattis at elit in suscipit. Vivamus elementum a risus at pellentesque. Aenean at dapibus libero. Nunc auctor ornare facilisis. Praesent in varius neque. Ut egestas faucibus magna a tempor. Ut laoreet venenatis nulla nec venenatis. Nam sed placerat diam, in venenatis lacus. Curabitur rutrum id turpis vel pulvinar. Donec et metus a nunc vestibulum feugiat.</p>
    
    <p>Aenean lectus mauris, gravida quis lorem porta, dictum congue elit. Aenean aliquam nisl magna, eu rhoncus sem posuere in. Praesent id justo id sem mollis dapibus at ut lacus. Duis augue quam, ultrices tincidunt odio a, luctus varius lorem. Nulla tristique congue arcu, et adipiscing sem lacinia et. Praesent at feugiat nunc. Donec eu magna at lacus hendrerit pretium sit amet ac arcu. Mauris eu quam pharetra, semper turpis id, molestie lacus. Fusce ac nulla blandit, dapibus arcu non, pellentesque mauris. Aenean leo tortor, aliquet non varius nec, rhoncus at mauris. Sed sed eros porttitor erat condimentum rutrum.</p>
</div>

CSS

p.lead {
    font-size: 30px;
}

JavaScript

$.fn.leadText = function(options) {
    options = $.extend({
        delimiter: ".",
        leadMinLength: 150
    }, options);

    var html = $(this).html();
    
    if (html.indexOf(options.delimiter) == -1) {
        return false;
    }
    
    var closestDelimiter = html.indexOf(options.delimiter, options.leadMinLength);
    
    var rawLead = html.substring(closestDelimiter, options.delimiter);
    var lead = rawLead.substring(rawLead.indexOf(">") + 1) + options.delimiter;
    
    //Clean original HTML
    $(this).html(html.replace(lead, ""));
    
    //Create lead
    var $lead = $("<p />");
    $lead.addClass("lead");
    $lead.html(lead);
    
    //Prepend lead
    $(this).prepend($lead);
    
    return this;
};

$(".content").leadText({
    leadMinLength: 250
});