如果缺少图像文件名，我如何使用 php 自动添加图像“alt”属性？

Question

我需要为数百张图片添加图片 alt 标签。问题是这需要永远，而且似乎有一个更简单的解决方案。

我已经能够使用 javascript 在某种程度上实现这一点，如下所示：

<script type='text/javascript'>  
 //<![CDATA[  
 $(document).ready(function() {  
  $('img').each(function(){  
   var $img = $(this);  
   var filename = $img.attr('src')  
    if (typeof attr == typeof undefined || attr == false) {
        $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    }  
  });  
 });  
 //]]>  
</script>

这正是我想要的，例如，如果我有这张图片：

<img src="http://mywebsite.com/images/the-image1.jpg" />

然后javascript会像这样自动添加alt：

<img src="http://mywebsite.com/images/the-image1.jpg" alt="the-image1" />

好吧，这一切都很好，但现在我想用 PHP 来代替，因为问题是这只是将标签添加到前端，这意味着它从页面源代码中不可见（仅检查元素), 这意味着搜索引擎将看不到 alt 标记，这意味着唯一的方法是使用 php 将其直接放入页面中。

那么我如何使用 php 来完成上述 javascript 解决方案？

Answer 1

文件名是否始终提供有意义的 slug？如果没有，您最好只使用空的 alt 标签。网络爬虫已经获取了图像文件名，因此添加最后一位只有在它实际上是对图像的描述时才会有所帮助。 （这也不是 100% 正确，它不会通过 JS 建立索引，一些机器人，特别是谷歌，在某种程度上解析 JavaScript。）

如果文件名没有描述性，它可能弊大于利（对于 SEO 和屏幕阅读器）。如果您打算继续使用此方案，我假设您正在或将会提供描述性文件名。

我假设图像不是以某种方式进行内容管理的，您可以从 alt（和/或 longdesc）属性的标题或描述中提取？

如果它是一次性修复，再次取决于命名的质量，它可能没问题。几百张图片可能不会花那么长时间，而且总是 [广告已删除] :)

替代文本具有多种功能：

• 屏幕阅读 读者代替图像允许的内容和功能 具有视觉或某些认知能力的人可以访问的图像 残疾。
• 它在浏览器中代替图像显示，如果 图像文件未加载或用户选择不查看时 图片。
• 它为图像提供语义含义和描述 可以被搜索引擎读取或用于以后确定 仅来自页面上下文的图像内容。

http://webaim.org/techniques/alttext/

Answer 2

您没有指定如何输出 html 内容，更具体地说是图像标签。

但我猜，根据你的问题，你有一个带有很多

img

标签的 html 文件，并且你想添加一个

alt

属性，而不用手动操作。

如果是这样的话，要走的路是用 PHP 解析你的 HTML 文件，并将结果保存到一个新的 HTML 文件中，所有的

img

标签都包含所需的

alt

标签。

可以用PHP方法读取HTML文件内容file_get_contents().

然后使用 preg_replace() 解析检索到的内容，以检测缺少

img

属性的

alt

标签，并添加它们。

最后用

file_put_contents()

将解析后的内容保存回 HTML 文件，您可以稍后使用。

PHP 实现可以是：

// Retrieve the HTML content to be parsed
$html = file_get_contents( "path_to_html_file" );

// This regexp select all img tags not already containing an alt attribute
$pattern = '#<img(?!.*alt=")(.+src="(([^"]+/)?(.+)\..+)"[^ /]*)( ?\/?)>#i';

// Add alt attribute to img tags lacking it
// put the filename without extension as a value to the alt attribute
$parsed_html = preg_replace( $pattern, '<img$1 alt="$4"$5>', $html );

// Save the parsed content to a new file
file_put_contents( "path_to_parsed_html_file", $parsed_html );

Answer 3

这就搞定了

jQuery(document).ready(function () {
  jQuery("img").each(function () {
    var img_src = jQuery(this).attr('src');
    if (typeof img_src !== typeof undefined && img_src !== false) {
      var img_alt = jQuery(this).attr('alt');
      var str = img_src
      var pieces = str.split('/');
      var imgName = pieces[pieces.length - 1];
      var imgnameArray = imgName.split('.');
      var alt = imgnameArray[0];
      if (img_alt == '' || typeof img_alt === typeof undefined || img_alt === false) {
        jQuery(this).attr('alt', alt);
      }
    }
  });
});

Answer 4

我使用此功能将所有没有或为空 alt 的图像替换为 $content 中的文件名：

 preg_replace_callback('~<img(.*?)>~', function ($matches) { //Search for all images
        if (!preg_match('~alt="\S+"~', $matches[1])) { // if alt with any characters not exists
            $img = preg_replace('~alt="\S*"~', '', $matches[0]); // remove empty alt
            preg_match('~src="(?:(?:[^"]+/)?(.+)\..+)"~', $img, $src); // get filename from src
            $alt = preg_replace('~-|_~', ' ', $src[1]); //replace '-' and '_' symbols with space symbol
            return preg_replace('~<img~', '<img alt="' . $alt . '"', $img); // put new alt into tag
        } else {
            return $matches[0];
        }
    }, $content);