Extract css from html

Question

I'm looking for a clean way to grab and remove all the css between the <style></style> tags. For example:

<style>
foo
</style>

content

<style>
bar
</style>

here

By the end of the process I should have a string with content\nhere (everything not between the style tags) and an array of matches between the style tags ['foo', 'bar'] or something similar. I've tried a lot of different regex approaches and none of the seemed to work for me. (I'm no regex pro though..)

Marcel · Accepted Answer · 2014-08-31 14:37:31Z

6

You should not access html with regular expressions. Just try DomDocument instead. It 's more cleaner and easier to access.

$dom = new DomDocument();
$dom->loadHTML('Your HTML here');

$elements = $dom->getElementsByTagName('style');
for ($i = $elements->length; --$i >= 0;) {
    $elements->item($i)->parentNode->removeChild($elements->item($i));
}

echo $dom->saveHTML();

This code is an example and not tested.

edited Aug 31, 2014 at 14:37

answered Aug 31, 2014 at 13:57

Marcel

5,1811 gold badge18 silver badges27 bronze badges

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

10 Comments

Casimir et Hippolyte Over a year ago

Using the DOM is the good way for this kind of task, but don't imagine that using regex is 'too expensive', because using the DOM is slower (in particular, you must pay the cost of the DOM tree building). But as I said before it stays the most clean way.

M K Over a year ago

@Marcel Nice approach here. Is it really faster then regex?

Casimir et Hippolyte Over a year ago

Don't forget to store or display $dom->saveHTML()

M K Over a year ago

You could use foreach on the $elements.

Casimir et Hippolyte Over a year ago

@MK: no it's not possible, because $elements is not an array but a nodeList, and elements must be removed from the end to the begining.

|

M K · Accepted Answer · 2014-08-31 14:05:07Z

1

I found the answer:

$html = "<style>css css css</style>my html<style>more css</style>";
preg_match_all("/<style>(.*?)<\/style>/is", $html, $matches);

$html = str_replace($matches[0], '', $html);
$css = implode("\n", $matches[1]);

echo $html; // my html
echi $css; // css css css \n more css

Originally I was looking for a pure regex solution, but this is fine for me.

answered Aug 31, 2014 at 14:05

M K

9,4567 gold badges46 silver badges45 bronze badges

Collectives™ on Stack Overflow

Extract css from html

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related