I have HTML with several custom tags. I want to find all but two ('start', 'end') and unwrap them. jQuery.find() seems to only find these custom tags when I search what's in the document, not when I search a jQuery object. What am I doing wrong?

Should be self-explanatory in the fiddle:

/

Here's the javascript part:

var raw = $('pre').html();
var html = $(raw);
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($('start'));


//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() {
    $(this).contents().unwrap();
});

console.log(cleaned);

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

and an example of the HTML:

<span class="ng-scope">CTAGCTCTCTGGAGATTAACGAGGAGAAATACTAGAtTGGTTCAT</span>
<start feat="1" class="ng-scope"></start>
<annotation index="1" class="ng-isolate-scope ng-scope" style="background-color: rgb(238, 153, 238); background-position: initial initial; background-repeat: initial initial;">
    <span tooltip="Another Promoter" tooltip-placement="mouse" tooltip-append-to-body="true" ng-transclude="" class="ng-scope">
        <span class="ng-scope">GATCATAAgcttgaat</span>
    </span>
</annotation>
<end feat="1" class="ng-scope"></end>
<span class="ng-scope">tagccaaacttatt</span>

which should be:

CTAGCTCTCTGGAGATTAACGAGGAGAAATACTAGAtTGGTTCAT<start feat="1" class="ng-scope"></start>GATCATAAgcttgaat<end feat="1" class="ng-scope"></end>tagccaaacttatt

Thanks

I have HTML with several custom tags. I want to find all but two ('start', 'end') and unwrap them. jQuery.find() seems to only find these custom tags when I search what's in the document, not when I search a jQuery object. What am I doing wrong?

Should be self-explanatory in the fiddle:

http://jsfiddle/hpNN3/2/

Here's the javascript part:

var raw = $('pre').html();
var html = $(raw);
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($('start'));


//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() {
    $(this).contents().unwrap();
});

console.log(cleaned);

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

and an example of the HTML:

<span class="ng-scope">CTAGCTCTCTGGAGATTAACGAGGAGAAATACTAGAtTGGTTCAT</span>
<start feat="1" class="ng-scope"></start>
<annotation index="1" class="ng-isolate-scope ng-scope" style="background-color: rgb(238, 153, 238); background-position: initial initial; background-repeat: initial initial;">
    <span tooltip="Another Promoter" tooltip-placement="mouse" tooltip-append-to-body="true" ng-transclude="" class="ng-scope">
        <span class="ng-scope">GATCATAAgcttgaat</span>
    </span>
</annotation>
<end feat="1" class="ng-scope"></end>
<span class="ng-scope">tagccaaacttatt</span>

which should be:

CTAGCTCTCTGGAGATTAACGAGGAGAAATACTAGAtTGGTTCAT<start feat="1" class="ng-scope"></start>GATCATAAgcttgaat<end feat="1" class="ng-scope"></end>tagccaaacttatt

Thanks

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 4, 2013 at 0:25 jahroy 22.7k1010 gold badges6161 silver badges110110 bronze badges asked Jul 4, 2013 at 0:13 Max BatesMax Bates 1,27811 gold badge1616 silver badges2121 bronze badges 3

• 4 html with custom tags is no longer html – Raj Nathani Commented Jul 4, 2013 at 0:16
• 1 with the exception of <IE6 you can create your own custom tags and browser will recognize them. regardless, they don't mess up the DOM and are interpreted correctly at least in Chrome, Firefox, Safari, and that's not what I was asking. If jQuery is known not to pick up custom elements, then that would be a helpful answer. But as shown in the fiddle, it can pick up custom tags, at least when in the document, not necessary when in an object. – Max Bates Commented Jul 4, 2013 at 0:35
• 2 Why write HTML in this manner? What benefits does tag <start></start> have over <div class="start"></div> or <span class="start"></span>? Not to mention, it is faster to use selector $('.className'). – Dom Commented Jul 4, 2013 at 0:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your problem lies with the your initial variables:

var raw = $('pre').html();
var html = $(raw);

This translates to var html = $($('pre').html()), which will not match any element. The reason being that, since the selector is not preceded by an # or ., it is looking literally looking for the tag:

<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;">
</annotaion>

etc...

Here is a demo of what I mean: http://jsfiddle/hpNN3/7/

---

Simply do the following:

var html = $('pre');

DEMO: http://jsfiddle/hpNN3/6/