How to replace URLs of text image in text modules with img elements using JavaScript?

Question

I'm a complete newbie to JavaScript, and I'm trying to make a Greasemonkey script that replaces image links with an actual image (and also does other things that I will do later).

So I thought I could use the following.

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

All I'm trying to do is use JavasScript (and / or jQuery), replace the text of the original URL in the "post-list-content-element" with the image that this URL refers to. In this example, I want to replace this URL with an actual image.

Answer 1

Thanks for adding a link to your question, it really helped. I removed my previous intricate efforts.

 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=$&>'); }); 

Caveat: this assumes that the actual images are no longer in your post-list-content-element .

Well, here is a more universal version, which is replaced only inside text fields. I will leave you to smooth out the errors :-)

 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, ji)); 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); } }); }); }; }()); 

Using:

 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 is not used, so you don’t have to worry about capturing groups in the regular expression, and it matches the g value.

Caution: not a cross browser.

Answer 2

Try the following:

 // ==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

Here's the full script that jQuery uses to create images from URL text:

 // ==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; } ); 

Link:

• jQuery
• replaceWith ()

WARNING: Beware that mixing text, HTML, and regular expression is fraught with pitfalls. If the problem becomes more complex than what you specified, you will need to use DOM-parsing methods.

Answer 4

It may be a little outside what you are looking for, but the fastest way to change the link to an image is to use jQuery and the following syntax:

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

Answer 5

You can use document.getElementById('image').src , where "image" is the id attribute of the img tag.