Extrating embedded styles from an HTML page with JQuery

Question

So, here's the problem...

I have to:

Grab a page of html via a REST API with a AJAX call,
Extract a table with a known id from that html (which, thankfully, is well-formed)
Extract the associated css for the table from a style block,
Append the table to a div on my page, and
Re-apply the original CSS

Therefore the parts of the page that I'm interested in are:

<style>
 #tableid td.someclass {
  ...
  }
 #tableid td.anotherclass {
  ...
  }
 [etc etc ..]
</style>

And

<table id="tableid">
 ...
</table>

So, going through the list above 1,2 & 4 are no problem at all. It's 3 and 5 that are taxing the brain - there are no external stylesheets to worry about BTW, everything is in the page that I'm grabbing inside a single tag.

I guess I could extract the entire element and then append it to my page - but that is messy and could result in unwanted side-effects. What I'd like to do is just extract the styling that applies to #tableid and then apply them the table appended to my div.

Is there an elegant way to do that?

polarblau · Accepted Answer · 2012-11-12 09:51:33Z

1

You could pull the styles from the header using a standard jQuery finder:

var styles = $('head style').text();

Then run a regular expression against it:

var tableID     = 'tableid',
    pattern     = new RegExp('#'+ tableID + '[^}]+}', 'g'),
    tableStyles = styles.match(pattern);

This should give you an array of styles for your table’s id. Now you can append these styles to your current document’s head:

$('<style/>', { text: tableStyles.join('\n') }).appendTo('head');

Your use case might require some fine–tuning, but this should approximately give you what you’re after.

answered Nov 12, 2012 at 9:51

polarblau

17.8k8 gold badges66 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Extrating embedded styles from an HTML page with JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related