用它们的 src 属性替换页面上的所有图像

Question

我需要创建一个小书签，用作为这些图像的 src URL 的字符串替换所有现场图像。我不是 JS 专家，所以我可以展示我的无效代码来给人留下我想要的印象。

是这样的：

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

我知道这应该非常容易做到，但我找不到任何可行的解决方案。

Answer 1

我建议：

// 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.stack.imgur.com/wa24z.jpg"></li>
  <li><img src="https://i.stack.imgur.com/jS9JB.jpg"></li>
  <li><img src="https://i.stack.imgur.com/ifMfn.jpg"></li>
  <li><img src="https://i.stack.imgur.com/rlEus.jpg"></li>
  <li><img src="https://i.stack.imgur.com/sRoGY.jpg"></li>
  <li><img src="https://i.stack.imgur.com/0dsoZ.jpg"></li>
  <li><img src="https://i.stack.imgur.com/GO9Tx.jpg"></li>
</ul>

JS Fiddle demo.

以上使用 ES6 功能（let、childNode.replaceWith() 和箭头功能）在未实现 ES6 的浏览器中将不起作用；以下是使用 ES5 的替代方案，它可能更可靠：

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.stack.imgur.com/wa24z.jpg"></li>
  <li><img src="https://i.stack.imgur.com/jS9JB.jpg"></li>
  <li><img src="https://i.stack.imgur.com/ifMfn.jpg"></li>
  <li><img src="https://i.stack.imgur.com/rlEus.jpg"></li>
  <li><img src="https://i.stack.imgur.com/sRoGY.jpg"></li>
  <li><img src="https://i.stack.imgur.com/0dsoZ.jpg"></li>
  <li><img src="https://i.stack.imgur.com/GO9Tx.jpg"></li>
</ul>

JS Fiddle demo.

如果您想让 src 文本成为可点击的 link，以便用户可以跟随 link 到源图像：

// 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.stack.imgur.com/wa24z.jpg"></li>
  <li><img src="https://i.stack.imgur.com/jS9JB.jpg"></li>
  <li><img src="https://i.stack.imgur.com/ifMfn.jpg"></li>
  <li><img src="https://i.stack.imgur.com/rlEus.jpg"></li>
  <li><img src="https://i.stack.imgur.com/sRoGY.jpg"></li>
  <li><img src="https://i.stack.imgur.com/0dsoZ.jpg"></li>
  <li><img src="https://i.stack.imgur.com/GO9Tx.jpg"></li>
</ul>

JS Fiddle demo.

参考文献：

Answer 2

您可以为所有图像设置 display:none 并使用 src 属性创建文本节点：

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>

Answer 3

你可以试试这个。这工作正常并使用 pure js （没有任何库）：

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>

用它们的 src 属性替换页面上的所有图像

Replace all images on page with their src properties

javascript

image

bookmarklet

src