Question

我正在开发一个网页，其中包含几百张缩略图。我想让图像的文件名（src）填充alt字段。例如，我目前的缩略图如下：

<img src="images/thumb1.jpg" />

我想用文件名填充alt字段。因此，期望的结果将是：

<img src="images/thumb1.jpg" alt="thumb1" />

有没有办法可以使用图像src自动生成这些alt标签？

任何建议都表示赞赏。谢谢你的帮助！

Answer 1

未经测试的第一个猜测是：

var images = document.getElementsByTagName('img');
var numImages = images.length;

for (i=0; i<numImages; i++) {
    images[i].alt = images[i].src;
}

JS Fiddle demo

为了证明这个可以更容易，使用JavaScript库，我想我也会提供jQuery演示：

$('img').each(
    function(){
        this.alt = this.src;
        this.title = this.src;
    });

jQuery-based JS Fiddle demo

<小时/> 已编辑因为我是个白痴......

我忘了指出你需要等待窗口完成加载（或者至少，对于document.ready事件），所以试试这样：

function makeAlt() {
    var images = document.getElementsByTagName('img');
    var numImages = images.length;
    for (i = 0; i < numImages; i++) {
        images[i].alt = images[i].src;
        images[i].title = images[i].src;
    }
}

将开场body标记更改为：

<body onload="makeAlt">

JS Fiddle demo

已编辑以解决OP的最终问题：

function makeAlt() {
    var images = document.getElementsByTagName('img');
    var numImages = images.length;
    var newAlt, stopAt;
    for (i = 0; i < numImages; i++) {
        newAlt = images[i].src.split('/').pop();
        stopAt = newAlt.indexOf('.');
        newAlt = newAlt.substring(0,stopAt);
        images[i].alt = newAlt;
        images[i].title = newAlt;
    }
}

JS Fiddle，虽然我怀疑有一种更为简洁的方式......

Answer 2

要获取文件名，您可以添加到David Thomas的代码中......

var name = images[i].getAttribute('alt').split('/');
name = name[name.length-1].split('.')[0];

所以你最终得到......

var images = document.getElementsByTagName('img');
var numImages = images.length;

for (i=0; i<numImages; i++) {
    var name = images[i].getAttribute('src').split('/');
    name = name[name.length-1].split('.')[0];
    images[i].setAttribute('alt') = name;
}

（也是令人惊讶的未经测试）

Answer 3

这里是一些简单的DOM操作和一些正则表达式魔术：

var imgs = document.getElementsByTagName('img');

// This will extract the file name (minus extension) from the image's `src`
// attribute. For example: "images/thumb1.jpg" => "thumb1"
var name_regexp = /([^/]+)\.[\w]{2,4}$/i;
var matches;

for ( i = 0; i < imgs.length; i++ ) {
    matches = imgs[i].src.match(name_regexp);

    if ( matches.length > 1 ) {
        imgs[i].alt = matches[1];
        imgs[i].title = matches[1];
    }
}

请参阅JSFiddle了解演示。

Answer 4

var images = document.getElementsByTagName("img");
var count = images.length;
for (i=0; i<count; i++){
    var src = images[i].getAttribute("src");
    var path = src.split("/");
    var fullname = path[path.length - 1];
    var name = fullname.split(".");
    var result = name[0];
    images[i].setAttribute("alt") = result;
}

Answer 5

我认为你应该问的真正问题是这一切是否真的有助于我的搜索引擎优化，因为我认为这就是你想要填充alt标签的原因？

有一些证据表明Google在阅读Javascript方面做得越来越好，但是它会在抓取页面之前运行该脚本并添加替代文本然后使用该替代文本索引页面并考虑替代文本以提供额外的值它已经在你的文件名中找到的关键字，特别是考虑到它渲染了脚本，所以它可能知道alt只是从文件名中复制。或者谷歌只是索引所有的HTML，甚至不打算尝试运行JavaScript？

我有兴趣听到其他人可能对此有任何额外的见解。

我个人觉得这可能会导致你的搜索引擎优化有所不足。如果您正在使用内容管理系统，您可能应该通过获取页面标题或标题的变量并将其插入alt文本来查看如何通过PHP添加alt文本。

除非你不关心你的搜索引擎优化并且真正为文本读者做这件事，否则忘记我刚才所说的一切。

如何使用图像的src为页面上的所有图像填充alt字段

5 个答案: