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

Question

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

4

我是JavaScript的初学者，试图制作一个Greasemonkey脚本，以实际图像替换图像链接（以及做其他我稍后需要的事情）。

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

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

我想要做的就是使用JavaScript（和/或jQuery），将“post-list-content-element”元素中的原始URL文本替换为该URL链接到的图像。在这个例子中，我希望用实际的图片替换那个URL。

- Alex

1

你制作了这个页面作为示例，但它没有链接。你是想交换实际的链接(<a>标签)还是原始URL文本？ - Brock Adams

是的，我正在尝试用图像替换那个原始文本。 - Alex

5个回答

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' \\>"))
});

- Julien Bourdon

我刚刚尝试了一下，但是页面加载后只显示一个空白页面和三个损坏的图像。 - Alex

你想把图片放在哪里？ - Julien Bourdon

我想用图片替换链接。 - Alex

哦，我现在明白你的问题了。你没有图片数组，你想要通过实际图像替换以jpg、png和gif结尾的链接，对吗？ - Julien Bourdon

让我进行一些测试，然后我会编辑我的答案。你想要使用RegExp对象。 - Julien Bourdon

显示剩余8条评论

2

以下是一个完整的脚本，使用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解析技术。

- Brock Adams

1

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

- Vigrond

但是我不能，这些链接没有任何id / class - 它们只是纯文本。 - Alex

我将无法编辑HTML代码，因为它是在论坛上，并且图片链接将在帖子类中。 - Alex

1

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

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

- Whatevo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 1983 · Accepted Answer

感谢您在问题中添加示例链接，它真的很有帮助。我已经删除了之前混乱的尝试。

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，因此您不需要担心在正则表达式中捕获组，并且它遵守g标志。

注意：不跨浏览器。