JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">test</div>
<test>Hi</test>
<pre><start feat="11" class="ng-scope"></start><annotation index="11" class="ng-isolate-scope ng-scope" style="background-color: rgb(238, 204, 153); background-position: initial initial; background-repeat: initial initial;"><span tooltip="Restriction Site" tooltip-placement="mouse" tooltip-append-to-body="true" ng-transclude="" class="ng-scope"></span></annotation><start feat="3" class="ng-scope"></start><annotation index="11-3" class="ng-isolate-scope ng-scope" style="background-color: rgb(238, 204, 153); border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: red; background-position: initial initial; background-repeat: initial initial;"><span tooltip="Xbal II, Restriction Site" tooltip-placement="mouse" tooltip-append-to-body="true" ng-transclude="" class="ng-scope"><span class="ng-scope">tagct</span></span></annotation><start feat="8" class="ng-scope"></start><annotation index="8-11-3" class="ng-isolate-scope ng-scope" style="background-color: rgb(238, 204, 153); border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: red; background-position: initial initial; background-repeat: initial initial;"><span tooltip="Xbal II, Feature5, Restriction Site" tooltip-placement="mouse" tooltip-append-to-body="true" ng-transclude="" class="ng-scope"><span class="ng-scope">a</span></span></annotation><end feat="3" class="ng-scope"></end><annotation index="8-11" class="ng-isolate-scope ng-scope" style="color: rgb(204, 34, 187); border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: red;"><span tooltip="Restriction Site, Feature5" tooltip-placement="mouse" tooltip-append-to-body="true" ng-transclude="" class="ng-scope"><span class="ng-scope">G</span></span></annotation><end feat="11" class="ng-scope"></end><annotation index="8" class="ng-isolate-scope ng-scope" style="color: rgb(204, 34, 187);"><span tooltip="Feature5" tooltip-placement="mouse"...

JavaScript

var html = $('pre');
var starts = html.find('start');
var spans = html.find('span');

//this returns nothing
//console.log(starts)
// works - can find in object
//console.log(spans)
//this works
console.log($($('.test').html()));


//only picks up spans, not annotations
// I want this to return the innerHTML of the pre, stripping all tags except for 'start' and 'end' -- but retain the contents of those tags.
var cleaned = html.find(':not(start, end)').each(function() {
    //console.log($(this));
});

//console.log(cleaned);

//$('#clean').html(cleaned)