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()和Arrow函数）在未实现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文本作为可单击的链接，以便用户可以跟踪到源图像的链接：

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

您可以尝试一下。可以正常工作，并使用class Example { constructor(key) { if (key) { if (/[^a-z]/.test(key)) { // true if any character in key isn't a-z throw new Error('Bad key'); } this.key = key; } else { this.key = String.fromCharCode( ...Array.from({ length: 100 }, () => Math.floor(Math.random() * 26 + 97)) ); } } } console.log('new Example():'); console.log(new Example().key); console.log('new Example("foo"):'); console.log(new Example("foo").key); console.log('new Example("Bad"):'); console.log(new Example("Bad").key);（不带任何库）：

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;
}

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

3 个答案: