Question

我是JavaScript的新手，我正在尝试制作一个Greasemonkey脚本，用实际图像替换图像链接（以及我稍后会做的其他事情）。

所以我想我可以使用以下内容。

var imagelinks = [
    "http*://*/*.jpg",
    "http*://*/*.png",
    "http*://*/*.gif"
];

我要做的就是使用JavasScript（和/或jQuery），将“post-list-content-element”元素中的原始URL文本替换为该URL链接到的图像。在this example中，我想将该网址替换为实际图片。

Answer 1

感谢您在问题中添加示例链接，这确实有帮助。我删除了以前的困惑。

var items = document.getElementsByClassName('post-list-content-element');
[].forEach.call(items, function(item){
    item.innerHTML = item.innerHTML.replace(
            /http?:\/\/\S*?\.(jpg|png|gif)/g,
            '<img src=$&>');
});

警告：这假设您的post-list-content-element div中已经没有实际图像。

好的，这是一个更通用的版本，只替换在文本节点中。我会告诉你解决这些问题： - ）

var replaceInChildTextNodes = (function(){

    var eachChild, splits;

    eachChild = function(node, f){
        var children, parent = node;
        children = [].slice.apply(parent.childNodes);
        children.forEach(function(child){
            f(child, parent);
            eachChild(child, f);
        });
    };

    splits = function(s, regexp){
        var nonmatches=[], matches=[], i=0, j=0;
        while((match = regexp.exec(s))){
            j = match.index;
            nonmatches.push(s.substr(i, j-i));
            matches.push(match[0]);
            i = j + match[0].length;
            if(!regexp.global)
                break;
        }
        nonmatches.push(s.substr(i));
        return {nonmatches: nonmatches, matches: matches};
    };

    return function(nodes, regexp, replacer){
        [].forEach.call(nodes, function(node){
            eachChild(node, function(childNode, parent){
                var match, i=0, j=0, split, newNodes=[];
                if(childNode.nodeName === '#text'){
                    split = splits(childNode.nodeValue, regexp);
                    if(split.matches.length === 0)
                        return;
                    newNodes = [];
                    split.nonmatches.forEach(function(text, i){
                        if(text !== '')
                            newNodes.push(document.createTextNode(text));
                        if(split.matches[i])
                            newNodes.push(replacer(split.matches[i]));
                    });
                    newNodes.forEach(function(newNode){
                        parent.insertBefore(newNode, childNode);
                    });
                    parent.removeChild(childNode);
                }
            });
        });
    };
}());

用法：

var parents = document.getElementsByClassName('post-list-content-element');
replaceInChildTextNodes(parents, /http?:\/\/\S*?\.(jpg|png|gif)/g, function(text){
    var img = document.createElement('img');
    img.src = text;
    return img;
});

它不使用String＃split，因此您无需担心在regexp中捕获组，并且它会尊重g标志。

警告：不要跨浏览器。

Answer 2

试试这个：

// ==UserScript==
// @name          your script
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// ==/UserScript==
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|].(gif|jpg|png))/ig;
$(".post-list-content-element").each(function(){
    $(this).html($(this).text().replace(exp,"<img src='$1' \\>"))
});

Answer 3

这是一个完整的脚本，它使用jQuery从URL文本创建图像：

// ==UserScript==
// @name     _Imagify image URL's
// @include  http://YOUR_SERVER/YOUR_PATH/*
// @include  http://pastehtml.com/view/bhn6zqytf.html
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

var textToImagify       = $(".post-list-content-element");

textToImagify.replaceWith ( function () {
    var imagifiedSrc    = $(this).html ();

    imagifiedSrc    = imagifiedSrc.replace (
                        /(https?:\/\/.+?\.(?:jpg|png|gif))/ig, '<img src="$1">'
                    );

    return imagifiedSrc;
} );

参考：

警告：请注意混合文本，HTML和正则表达式充满了陷阱。如果问题变得比你指出的更复杂，你将需要使用DOM解析技术。

Answer 4

这可能有点超出您的需求，但我知道更改图像链接的最快方法是使用jQuery和以下语法：

$("img#your_image_id").attr("src", "your_image_location");

Answer 5

您可以使用document.getElementById('image').src，其中'image'是img标记的id属性。

如何使用JavaScript将文本节点中的纯文本图像URL替换为img元素？

5 个答案: