JSFiddle - React, Tailwind, and code Playground

by zachreynolds

HTML

<div><div class="rssFeed">    <h3><a href="https://www.reddit.com/r/science/top/.rss?sort=top&amp;t=day" target="_blank">top scoring links : science</a></h3>
    <span class="rssFeedTitle j-rss-feed-title">Tumor imaging technique has potential as anti-cancer weapon, mouse study shows. Unlike traditional light therapy — which is limited to the skin and areas accessible with an endoscope — this technique can target and trigger light-sensitive drugs to produce toxic free radicals that kill tumor cells.</span>
     (Sat, 27 Jan 2018)    <br>
    <br>

    
        
            <a href="https://www.reddit.com/r/science/comments/7tgla1/tumor_imaging_technique_has_potential_as/"><img src="https://a.thumbs.redditmedia.com/-kPt350AHgWy6oFjdiJVw1AmwU_hp9KUnmhnpoCB-60.jpg" alt="Tumor imaging technique has potential as anti-cancer weapon, mouse study shows. Unlike traditional light therapy — which is limited to the skin and areas accessible with an endoscope — this technique can target and trigger light-sensitive drugs to produce toxic free radicals that kill tumor cells." title="Tumor imaging technique has potential as anti-cancer weapon, mouse study shows. Unlike traditional light therapy — which is limited to the skin and areas accessible with an endoscope — this technique can target and trigger light-sensitive drugs to produce toxic free radicals that kill tumor cells."></a>
        
        
            submitted by   <a href="https://www.reddit.com/user/drewiepoodle">/u/drewiepoodle</a>
            <a href="https://source.wustl.edu/2018/01/light-triggered-nanoparticles-show-promise-metastatic-cancer/">[link]</a>   <a href="https://www.reddit.com/r/science/comments/7tgla1/tumor_imaging_technique_has_potential_as/">[comments]</a>
        
    
<br>
    <a href="https://www.reddit.com/r/science/comments/7tgla1/tumor_imaging_technique_has_potential_as/" target="_blank">
        &gt;&gt; Read More</a><br><br>
    <span class="rssFeedTitle j-rss-feed-title">Researchers have...

CSS

.mm {background:#f00;margin:10px 0px 0px 0px;padding:5px 5px 5px 5px}
.rssFeed, .rssFeed * {
    text-align: left;
    font-weight: 400;
}
.rssFeed, .rssFeed * {
    text-align: left;
    font-weight: 400;
}
.rssFeed .rssFeedTitle {
    clear: both;
}
.rssFeed{background:rgba(0,0,0,0.5);padding:10px;}
.wrappedtext {margin: -22px 0px 0px 5px}

JavaScript

$(".rssFeedTitle").each(
function (index) {
    $(this).nextUntil(".rssFeedTitle").addBack().wrapAll("<div class='mm'></div>");
});


$(function() {

    var test = $('.rssFeed')
        .contents()
        .filter(function() {
            return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
        })
        .wrap('<div class="wrappedtext" />');

});
$(function() {
$('.wrappedtext:contains("subm")').css('display', 'none');
});

$(function() {
$('.wrappedtext').filter( function(){ return $(this).text().length>100; } ).css({"margin": " 0px 0px -5px 0px", "background": "#f00", "padding":"5px"});
});
/*
$('.rssFeed').each(function() {
    var data = [];
    $(this).contents().each(function() {
        if ( this.nodeType === Node.TEXT_NODE ) {
            data.push(this);
        }
    }).end().append( $('<div class="red" />').append(data) );
});
*/