Replace all images on page with their src properties

Question

I need to create a bookmarklet replacing all on-site images with strings that'd be src URLs of these images. I am not JS guy, so I can show my non-valid code to give an impression of what I want.

it's something like this:

var tags = document.getElementsByTagName("img");
for (var i = 0; i < tags.length; i++) { 
var image = tags[i].getAttribute("src");
tags[i].innerHTML = image; }

I know it should be extremely easy to do, but I couldn't find any working solution.

Answer 1

I’d suggest:

// retrieve all <img> elements in the document,
// using document.querySelector(); then iterate
// over that NodeList using
// NodeList.prototype.forEach():
document.querySelectorAll('img').forEach(

  // 'el' is a reference to the current element of
  // of the NodeList of elements; and here we use
  // Node.replaceWith() to replace the current ('el')
  // Node with a textNode, with the node-value set to
  // the src of the element:
  (el) => el.replaceWith(document.createTextNode(el.src))
);

// retrieve all <img> elements in the document,
// using document.querySelector(); then iterate
// over that NodeList using
// NodeList.prototype.forEach():
document.querySelectorAll('img').forEach(

  // 'el' is a reference to the current element of
  // of the NodeList of elements; and here we use
  // Node.replaceWith() to replace the current ('el')
  // Node with a textNode, with the node-value set to
  // the src of the element:
  (el) => el.replaceWith(document.createTextNode(el.src))
);

<ul>
  <li><img src="https://i.sstatic.net/wa24z.jpg"></li>
  <li><img src="https://i.sstatic.net/jS9JB.jpg"></li>
  <li><img src="https://i.sstatic.net/ifMfn.jpg"></li>
  <li><img src="https://i.sstatic.net/rlEus.jpg"></li>
  <li><img src="https://i.sstatic.net/sRoGY.jpg"></li>
  <li><img src="https://i.sstatic.net/0dsoZ.jpg"></li>
  <li><img src="https://i.sstatic.net/GO9Tx.jpg"></li>
</ul>

JS Fiddle demo.

The above, with its usage of ES6 features (let, childNode.replaceWith() and Arrow functions) will not work in browsers that don't implement ES6; the following is an alternative using ES5 which may be more reliable:

function naiveReplaceWith(originalNode, replacementNode) {

  // here we navigate from the originalNode (the node to be replaced)
  originalNode
    // to its parentNode:
    .parentNode
    // and call parentNode.replaceChild:
    .replaceChild(
      // supplying the replacement-node as the first argument:
      replacementNode,
      // and the original node as the second:
      originalNode);
}

// here we use Array.prototype.slice(), along with Function.prototype.call,
// to allow us to apply the Array.prototype.forEach() to the Array-like
// NodeList returned by document.querySelectorAll():
Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function(el) {
  // using the anonoymous function on each of the elements in the Array of elements:
  naiveReplaceWith(el, document.createTextNode(el.src));
});

<ul>
  <li><img src="https://i.sstatic.net/wa24z.jpg"></li>
  <li><img src="https://i.sstatic.net/jS9JB.jpg"></li>
  <li><img src="https://i.sstatic.net/ifMfn.jpg"></li>
  <li><img src="https://i.sstatic.net/rlEus.jpg"></li>
  <li><img src="https://i.sstatic.net/sRoGY.jpg"></li>
  <li><img src="https://i.sstatic.net/0dsoZ.jpg"></li>
  <li><img src="https://i.sstatic.net/GO9Tx.jpg"></li>
</ul>

JS Fiddle demo.

If you wanted to have the src text as a clickable link, so that the user could follow the link to the source image:

// a named function that takes a couple of arguments,
// the URL to be the href of the created element, and
// the String which will be the text-content of the
// created elemeent:
let anchorCreate = (href, text) => {

  // creating an <a> element:
  let a = document.createElement('a');

  // setting the href property:
  a.href = href;

  // setting the textContent property; if there is
  // no supplied text then the textContent will be
  // set to the href:
  a.textContent = text || href;

  return a;
}
// retrieve all <img> elements in the document,
// using document.querySelector(); then iterate
// over that NodeList using
// NodeList.prototype.forEach():
document.querySelectorAll('img').forEach(

  // here we replace the current element ('el') with
  // the content returned from the function:
  (el) => el.replaceWith(anchorCreate(el.src))

);

<ul>
  <li><img src="https://i.sstatic.net/wa24z.jpg"></li>
  <li><img src="https://i.sstatic.net/jS9JB.jpg"></li>
  <li><img src="https://i.sstatic.net/ifMfn.jpg"></li>
  <li><img src="https://i.sstatic.net/rlEus.jpg"></li>
  <li><img src="https://i.sstatic.net/sRoGY.jpg"></li>
  <li><img src="https://i.sstatic.net/0dsoZ.jpg"></li>
  <li><img src="https://i.sstatic.net/GO9Tx.jpg"></li>
</ul>

JS Fiddle demo.

References:

• Array.prototype.slice().
• Arrow Functions.
• ChildNode.replaceWith().
• document.createElement().
• document.createTextNode().
• document.querySelectorAll().
• Function.prototype.call().

Answer 2

you can try this. this works fine and uses pure js (without any library):

document.querySelectorAll("img").forEach((i)=>{
  i.insertAdjacentElement("afterend", ((sc)=>{sc.classList.add("replaced-text");  sc.innerHTML=i.src; return sc;})(document.createElement("span")));
  i.parentNode.removeChild(i);
});

.replaced-text{
  display: block;
  color: #300;
}

<div>
  <img src="https://lorempixel.com/50/50/nature/1" alt=""/>
  <img src="https://lorempixel.com/50/50/nature/2" alt=""/>
  <img src="https://lorempixel.com/50/50/nature/3" alt=""/>
  <img src="https://lorempixel.com/50/50/nature/4" alt=""/>
  <img src="https://lorempixel.com/50/50/nature/5" alt=""/>
  <img src="https://lorempixel.com/50/50/nature/6" alt=""/>
</div>

Answer 3

You can probably set display:none to all the images and create text node with the src attribute:

var tags = document.getElementsByTagName("img");
for (var i = 0; i < tags.length; i++) { 
var image = tags[i].getAttribute("src");
  tags[i].style.display = 'none';
  var el = document.createTextNode(image);
  document.getElementById('container').appendChild(el);
}

<div id="container">
  <img src="/image1"/>
  <img src="/image2"/>
  <img src="/image3"/>
  <img src="/image4"/>
</div>