Replace specific inline CSS with HTML counterpart in Perl

Question

Hi there. This is my first time using Stack Overflow, so if I've done something wrong let me know.

I am currently trying to write a "scraper", for lack of better term, that will extract html and replace certain inline CSS styles with the HTML counterparts. For example, I have this HTML:

<p style="text-align:center"><span style="font-weight:bold;font-style:italic;">Some random text here. What's here doesn't matter so much as what needs to happen around it.</span></p>

I want to be able to replace font-weight:bold with <b>, font-style:italic with <i>, text-align:center with <center>. Afterwards, I'll be using regex to remove all non-basic HTML tags, and any attributes. KISS definitely applies here.

I have read this question: http://stackoverflow.com/questions/1337343 and a few others regarding the use of HTML::TreeBuilder and other modules (like HTML::TokeParser) but so far I've stumbled all over myself.

I'm new to Perl, but not new to coding in general. The logic of it is the same.

Here's what I have so far:

#!/usr/bin/perl
use warnings;
use strict;

use HTML::TreeBuilder;

my $newcont = ""; #Has to be set to something? I've seen other scripts where it doesn't...this is confusing.
my $html = <<HTML;
<p style="text-align:center"><span style="font-weight:bold;font-style:italic;">Some random text here. What's here doesn't matter so much as what needs to happen around it.</span> And sometimes not all the text is styled the same.</p>
HTML

my $tb = HTML::TreeBuilder->new_from_content($html);
my @spans = $tb->look_down(_tag => q{span}) or die qq{look_down for tag failed: $!\n};

for my $span (@spans){
    #What next?? A print gives HASH, not really workable. Split doesn't seem to work...I've never felt like such a noobie coder before.
}

print $tb->as_HTML;

Hopefully someone can help me out, show me what I may have done wrong, etc. I'm genuinely curious as to what other possible ways there are to do this. Or if it's ever been done before.

Also, if someone could help by suggesting which tags I should have used, that would be great. The only one I know for sure to use is perl.

Answer 1

From the HTML::Element docs, it appears that look_down() returns a list of HTML::Element objects. Perl objects are typically references to hashes (although they need not be) -- which is why you're getting HASH when you print $span.

At any rate, inside your for-loop, you should be able to call

 $span->method()

where method is any method of HTML::Element. For your purposes, the methods all_attr(), as_text(), and replace_with() look fairly promising.

I tried to link to each of the methods but SO didn't like the gnarly CPAN anchored links, so here's one quick link to the main doc page for convenience:

http://search.cpan.org/~petek/HTML-Tree-3.23/lib/HTML/Element.pm

Answer 2

Mike,
The problem is that in Perl you can unfortunately not see the type of the elements in the debugger, as the object system is just a wrapper around the standard types. Thus it is impossible to find relevant attributes/methods wo looking at the documentation and/or code. About Objects gives you more details about this.
Every $span will be a HTML::Element object - Ben's answer covers this part. I guess you will just change some attributes inside the tree and will save the tree to a new file.

Answer 3

By using HTML::TreeBuilder you are definitely on the right track; for parsing CSS, I've just found CSS::DOM. It is a really interesting module, which allows you to access properties with little effort.

#!/usr/bin/perl
use warnings;
use strict;

use HTML::TreeBuilder;
use CSS::DOM::Style;

my $html = <<HTML;
<p style="text-align:center"><span style="font-weight:bold;font-style:italic;">Some random text here. What's here doesn't matter so much as what needs to ha>
HTML

my $tb = HTML::TreeBuilder->new_from_content($html);


my @replacements = (
    { property => 'font-style', value => 'italic', replacement => 'em' },
    { property => 'font-weight', value => 'bold', replacement => 'strong' },
    { property => 'text-align', value => 'center', replacement => 'center' },
);

# build a sensible list of tag names (or just use sub { 1 })
my @nodes = $tb->look_down(sub { $_[0]->tag =~ /^(p|span)$/ });

for my $el (@nodes) {
    if ($el->attr('style')) {
        my $st = CSS::DOM::Style::parse($el->attr('style'));
        if ($st) {
            foreach my $h (@replacements) {
                if ($st->getPropertyValue($h->{property}) eq $h->{value}) {
                    $st->removeProperty($h->{property});
                    my $new = HTML::Element->new($h->{replacement});
                    foreach my $inner ($el->detach_content) {
                        $new->push_content($inner);
                    }
                    $el->push_content($new);
                }
            }
            $el->attr('style', $st->cssText ? $st->cssText : undef);
        }
    }
}

print $tb->as_HTML(undef, "\t");