在多个 HTML 个文件中查找并替换一个变量

Question

我想使用 Perl 脚本在多个 html 文件中查找和替换变量。

具体来说，我想在多个 html 文件中找到“Genus_species”变量并将其替换为新值，替换 Javascript key/value 数组。听起来很简单，但我不知道怎么做。请指教。谢谢

这是我的 Perl 脚本：

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

use JSON::PP;

use English;   ## use names rather than symbols for special variables

my $dir = '/Users/jdm/Desktop/xampp/htdocs/cnc/images/plants';

opendir my $dfh, $dir  or die "Can't open $dir: $OS_ERROR";
my %genus_species;  ## store matching entries in a hash

for my $file (readdir $dfh)
{
    next unless $file =~ /.png$/;  ## entry must have .png extension
    my $genus = $file =~ s/\d*\.png$//r;
    push(@{$genus_species{$genus}}, $file);   ## push to array,the @{} is to cast the single entry to a reference to an list

}

@{$genus_species{$_}} = sort @{$genus_species{$_}}
   for keys(%genus_species);


my $str = (JSON::PP->new->utf8->canonical->encode(\%genus_species)); ## Assign variable to Javascript key/value array

请注意，我的 Perl 脚本以变量 ($str) 结尾，该变量定义 html 文件中“Genus_species”变量的替换值。它在这里结束，因为我不知道从这里去哪里，除了知道最终我想要 Genus_species=$str.

也就是说，这是我的 Perl 脚本将在其上执行查找和替换功能的 html 个文件之一：

<!DOCTYPE html>
<html>

<!--Plant slideshow-->

<body>
<script type="text/javascript">

<!--Updating the variable "Genus_species" updates the slideshow-->

var Genus_species={"Acalypha_deamii":["Acalypha_deamii1.png","Acalypha_deamii2.png","Acalypha_deamii3.png"],"Acalypha_ostryifolia":["Acalypha_ostryifolia1.png","Acalypha_ostryifolia2.png"]

var curimg=0
var plant=Genus_species.Polygonum_pensylvanicum <!--Entering the specific "Genus_species" after the "." loads ALL photos of the specified plant into the slideshow-->

function swapImage()
{
   document.getElementById("slide").setAttribute("src", "/Users/jdm/Desktop/xampp/htdocs/cnc/images/plants/"+plant[curimg])
   curimg=(curimg<plant.length-1)? curimg+1 : 0; timer = setTimeout("swapImage()",4000);
}

function stopShow()
{
  clearTimeout(timer);
}

function runShow()
{
  swapImage();  
}
</script>

<body onLoad="runShow()">

<IMG STYLE="position:relative; TOP:35px; LEFT:100px" img id="slide" onMouseover="stopShow()" onMouseout="runShow()" src="" />

</body>
</html>

再次，请告知如何使用 Perl 脚本在多个 html 文件中找到“Genus_species”变量并将其值替换为“$str”变量的值。谢谢

Answer 1

这是一个示例，说明如何使用正则表达式替换 HTML 文件中的 JSON 字符串。

use strict;
use warnings;
# assume you have generated the JSON encoding string in variable $replace
my $replace = '{Acalypha_deamii":["Acalypha_deamii1.png","Acalypha_deamii2.png","Acalypha_deamii3.png"],"Acalypha_ostryifolia":["Acalypha_ostryifolia1.png","Acalypha_ostryifolia2.png"]}';

my $fn = 'result.html';
my $str;
{
    open ( my $fh, '<', $fn ) or die "Could not open file '$fn': $!";
    # read the whole file into a string
    $str = do { local $/; <$fh> };
    close $fh;
}
$str =~ s/var Genus_species=\K(.*?)$/$replace/m;
# save the file (overwrites the original)
open ( my $fh, '>', $fn ) or die "Could not open file '$fn': $!";
print $fh $str;
close $fh;

Answer 2

生成 html 文件不是比尝试编辑文件更容易吗？作为一个附带的好处，您将不必为新物种创建和维护文件——脚本将为您生成它们。

建议： 将通用 Javascript 代码移动到外部 slideshow.js 文件中，并且只注入特定 organism 部分脚本生成 html 文件。它将使文件更小且更易于阅读，好处：页面加载速度更快，网络浏览器解析更少。

注：可能OP需要花一点时间研究CSS网页样式

use strict;
use warnings;
use feature 'say';

my %species;
my $template = do { local $/; <DATA> };

# Do what is required to generate %species hash

for my $organism ( sort keys %species ) {
    my $page = $template;
    my $data = $species{$organism};
    
    $page =~ s/<PLACEHOLDER>/$data/gs;
    
    species_html($organism,$page);
}

sub species_html {
    my $ogranism = shift;
    my $page     = shift;

    my $filename = $organism . '.html';
    
    open my $fh, '>', $filename
        or die "Couldn't to open $filename";
        
    say $fh $page;
        
    close $fh;
}

__DATA__
<!DOCTYPE html>
<html>

<!--Plant slideshow-->

<body>
<script type="text/javascript">

<!--Updating the variable "Genus_species" updates the slideshow-->

var Genus_species=<PLACEHOLDER>

var curimg=0
var plant=Genus_species.Polygonum_pensylvanicum 
<!--
    Entering the specific "Genus_species" after the "." loads ALL photos
    of the specified plant into the slideshow
-->

function swapImage()
{
   var basedir = "/Users/jdm/Desktop/xampp/htdocs/cnc/images/plants/"
   document.getElementById("slide").setAttribute("src", basedir + plant[curimg])
   curimg=(curimg<plant.length-1)? curimg+1 : 0; timer = setTimeout("swapImage()",4000);
}

function stopShow()
{
  clearTimeout(timer);
}

function runShow()
{
  swapImage();  
}
</script>

<body onLoad="runShow()">

<IMG STYLE="position:relative; TOP:35px; LEFT:100px" img id="slide" onMouseover="stopShow()" onMouseout="runShow()" src="" />

</body>
</html>

在多个 HTML 个文件中查找并替换一个变量

Find and replace a variable in multiple HTML files

regex

perl

grep

replace

find