Question

我对JavaScript编写相对无望，我正试图在笔记页面上调整默认的tumblr头像图像。目前无法在笔记中包含大型头像，因此我尝试使用基本正则表达式替换动态生成的URL。

用户的头像会在所有笔记上生成类似的内容：

"http://28.media.tumblr.com/avatar_1d3b686efcf0_16.png"

...主要化身的16x16像素缩减。但系统最多可显示128px .pngs。我想编写一些查找每个_16.png的JavaScript，并将其更改为_64.png。

这是我糟糕的剧本

var value = "_16.png";   
var newValue = value.replace( new RegExp( "/_16.png/g"), "_64.png" );  
document.write( newValue );

以下是查看结果的页面：

http://nutnics.tumblr.com/post/1311264016

有人知道tumblr是否覆盖了这个脚本吗？或者如果我写错了？

Answer 1

当您使用RegExp构造函数时，您必须关闭/分隔符，并且必须将g标志作为单独的参数传递：

var re = new RegExp('_16\\.png', 'g');

您还应该使用反斜杠转义.，因为它在正则表达式中具有特殊含义。而且，因为它在字符串文字中，你必须逃避反斜杠。但是使用正则表达式文字要容易得多：

var newValue = value.replace( /_16\.png/g, '_64.png' );

Answer 2

如果放在文档的末尾，这个脚本可以解决问题：

var elements = document.getElementsByTagName('img');
for(i=0;i<elements.length;i++){
    elements[i].src = elements[i].src.replace(/_16\.png/g, '_64.png');
}

如果你可以包含jQuery，那么这是一个更好的选择：

$(document).ready(function(){      
    $('img.avatar').attr("src", function(){
        return this.src.replace(/_16\.png/g, '_64.png');
    })
});

Answer 3

就像Allan说你想要使用/_16\.png/g作为你的正则表达式一样，但你的代码看起来就像你正在将正则表达式写入文档（？），你应该做的是：

var els = document.getElementsByTagName('img');
for (var i = 0, l = els.length; i < l; i += 1) {
    els[i].src = els[i].src.replace(/_16\.png/g, '_64.png');
}

这会将img元素的大小更改为64px！

另外，我非常喜欢ES5中的新东西（最新版本的JavaScript），因为它感觉JavaScripty更多，所以你也可以这样做：

var els = document.getElementsByTagName('img');
els.forEach(function (el) {
    el.src = el.src.replace(/_16\.png/g, '_64.png');
});

forEach包含在大多数现代浏览器中，但您可以将其添加到不喜欢的浏览器中：

if (!(typeof Array.prototype.forEach === 'function')) {
    Array.prototype.forEach = function (fn) {
        for (var i = 0, l = this.length; i < l; i += 1) {
            fn(this[i]);
        }
    };
}

享受！

tumblr avatar img调整大小问题。尝试使用正则表达式来调整img的大小。

3 个答案: