使用 JavaScript 小书签从图像链接中提取替代文本

Question

我找到了一种通过找到的 Perl 脚本从图像 links 中提取替代文本的方法。但是，该方法需要下载目标 HTML；通过 Perl 脚本处理它，然后生成一个包含我需要的特定替代文本的文本文件；然后删除一些我无法通过代码手动过滤掉的额外文本，因为我不知道如何使正则表达式与 Perl 一起工作（我尝试安装 PCRE 无济于事）。

这种方法仍然不切实际，我确信我可以通过 JavaScript 小书签提取替代文本，速度要快得多，并立即将输出整齐地列在新选项卡中。但是，我不知道如何将我必须的 Perl 脚本转换为 JavaScript，也不知道如何从头开始编写。

这是 Perl 脚本：

{
    # Get data from HTML file
    my $From = cwd() . '/' . $ARGV[0];
    open( HTMLFILE, '<' . $From ) or die( "Cannot open $From to read." );

    my $Html;
    read HTMLFILE, $Html, -s $From;
    close HTMLFILE;

    # Find IMG elements
    print "Images found!";
    my %AltTexts;
    while ( $Html =~ /(<IMG\b.*?>)/isg ) {
        my $ImgElement = ;

        # Find SRC tag
        $ImgElement =~ /SRC\s*=\s*([\"\'])(.*?)/is;
        my $Src = ;

        # Find ALT tag & store text
        if ( $ImgElement =~ /ALT\s*=\s*([\"\'])(.*?)/is ) {
            $AltTexts{$Src} = ;
        }
        else {    # No ALT found so give it default text if none already found
            unless ( exists( $AltTexts{$Src} ) ) {
                $AltTexts{$Src} = 'NO_ALT_TEXT';
            }
        }
    }

    # Write extracted data to a file
    my $To = cwd() . '/' . $ARGV[0] . '.txt';
    open( ALTTEXTFILE, '>' . $To ) or die( "Cannot open $To to write." );

    foreach my $SrcPath ( sort keys %AltTexts ) {
        print ALTTEXTFILE "$AltTexts{$SrcPath}\n";
    }
    close ALTTEXTFILE;
}

我确实对其进行了调整以阻止脚本打印 link、删除空行等

可以找到原脚本here

所以，我的问题是 JavaScript 用于提取替代文本的内容是什么样的？

Answer 1

像这样：

javascript:(function() {
  var imgs = document.images,alts=[];
  for (var i=0;i<imgs.length;i++) {
      alts.push(imgs[i].getAttribute("alt") || "no alt");
  }
  alert(alts.join("\n"));
})()

示例代码：

(function() {
  var imgs = document.images,alts=[];
  for (var i=0;i<imgs.length;i++) {
    alts.push(imgs[i].getAttribute("alt") || "no alt");
  }
  console.log(alts);
})()

<img alt="alt1" />
<img alt="" />
<img alt="alt2" />

在新 window 中显示（允许弹出窗口拦截器）

javascript:(function() {
  var imgs = document.images,alts=[],w;
  for (var i=0;i<imgs.length;i++) {
    alts.push(imgs[i].getAttribute("alt") || "no alt");
  }
  if (alts.length>0) {
    w = window.open("","_blank");
    if (w) {
      w.document.write(alts.join("<br />"));
      w.document.close();
    }
    else {
      alert("cannot pop\n"+alts.join("\n"));
    }
  }
})()

为了避免重复：

改变

alts.push(imgs[i].getAttribute("alt") || "no alt");

至

var alt = imgs[i].getAttribute("alt");
if (alts && alts.indexOf(alt)==-1) alts.push(alt);

使用 JavaScript 小书签从图像链接中提取替代文本

Extracting alt text from image links with a JavaScript bookmarklet

html

javascript

regex

perl

alt