Replace all images on page with their src properties

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.

Solution

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: