Taking the time to re-read your requirements (sorry, I was making dinner for the kids when I last posted) I notice you want to do this for various header tags, so consider this:
td.html
<!DOCTYPE html>
<html>
<head>
<style>
div.hammer {
height: 100px;
}
</style>
</head>
<body>
<h2>Derp</h2>
<p>Derp content here</p>
<div class='hammer'>Sponsored by artisan hammers</div>
<h3>Gerp</h3>
<p>Gerp content here</p>
<div class='hammer'>Sponsored by artisan hammers</div>
<h4>Blerp</h4>
<p>Blerp content here</p>
</body>
</html>
Why the divs? to break up the content a little so when you construct your TOC that it'll be easy to visibly test.
td.pl
#!/usr/bin/perl
use strict;
use warnings;
use feature 'say';
use Mojo::DOM;
use Mojo::File;
my $path = Mojo::File->new('td.html');
my $html = $path->slurp;
my $dom = Mojo::DOM->new( $html );
#for each hr
foreach my $hr ( $dom->find('h2,h3,h4,h5,h6')->each ){
# grab the text
my $text = $hr->text;
my $class = $hr->text;
# remove x.x.
$class =~ s/\-?\d+\.\d+\. //g;
# update the DOM
$hr->replace("<h2 class='$class'>$text</h2>");
}
# display updated DOM
say $dom;
Output.
<!DOCTYPE html>
<html>
<head>
<style>
div.hammer {
height: 100px;
}
</style>
</head>
<body>
<h2 class="Derp">Derp</h2>
<p>Derp content here</p>
<div class="hammer">Sponsored by artisan hammers</div>
<h2 class="Gerp">Gerp</h2>
<p>Gerp content here</p>
<div class="hammer">Sponsored by artisan hammers</div>
<h2 class="Blerp">Blerp</h2>
<p>Blerp content here</p>
</body>
</html>
Now all you need to do is read and understand the Mojo docs, adding a little bit of code to create a TOC, appending it after the body, or wherever is appropriate in your actual HTML.