Question

我需要编写一个JS功能，它读取整个HTML文档并用其他文本替换文本。

HTML -

<ul>
  <li>
    <a id="aId" href="https://www.w3schools.com" target="_blank"> Link1 </a>
  </li>
  <li>
    <a id="bId" href="https://www.w3schools.com" target="_blank"> Link2 </a>
  </li>
  <li>
    <a href="https://www.w3schools.com" target="_blank"> Link3 </a>
  </li>
</ul>

Javascript代码 -

var strMessage1 = document.getElementById("aId") ;
var first = 'target="_blank"';
var second = 'target="_blank" rel="noopener noreferrer" onClick="alert(\'Hello World!\')"';

strMessage1.innerHTML = strMessage1.innerHTML.replace(first, second) ;

javascript应该能够运行整个HTML，并将第一个var替换为第二个var（在脚本中定义），无论在哪里找到。这是第一个id - 'aId'的例子。

问题 - 脚本如何覆盖和替换

中的内容

bId id？
Link3，没有id？

也是。

DEMO - http://jsfiddle.net/nikhil_gupta/rzy3ajhx/。

注意 - 不使用jQuery。

Answer 1

.innerHTML 更改元素的内容（开始和结束标记之间的内容）。您的代码会尝试更改元素属性的值。这些都不是一回事。

此外，了解使用innerHTML（和outerHTML）的含义也很重要。

它们都导致DOM必须重新构建然后重新绘制并且重新流动，这在资源方面非常昂贵。
他们的使用也将删除任何以前设置的事件处理程序。
他们在您的应用程序中打开安全漏洞。
他们通常伴随着gob和gobs的字符串连接和嵌套引号。

要更改元素属性的值，只需访问要作为JavaScript对象属性修改的HTML属性，或使用 element.setAttribute(attributeName, value) DOM方法。

问题 - 脚本如何覆盖和替换
中的内容

bId id？

Link3，没有id？


。

当您想要更改多个元素时，需要将它们放入集合或数组中，然后您可以循环它们。将它们组成一个组可以通过许多不同的方式完成，这些方式与id根本没有关系（通过标记名称，CSS类，文档中的位置，属性值等））。在您的示例中，如果我们想要修改具有target=_blank作为href值的项目符号内的所有链接，我们可以使用CSS选择器和 .querySelectorAll() 方法。您在下面的示例中注意到，我已从HTML中完全删除了id属性，但代码仍然有效。

最后，您不应该使用内联HTML事件属性（onclick等）来配置事件处理回调函数。这是一项25年以上的技术，每个新的Web开发人员都会在不理解 why it shouldn't be used 的情况下进行复制和粘贴。相反，请使用基于标准的现代代码和 .addEventListener() DOM API 。

＆＃13;

// Get the elements you wish to work on into an Array
// Here, we're selecting <a> elements that have an href attribute with a value of _blank 
// that are direct children of <li> elements:
var elementsToChange = Array.prototype.slice.call(document.querySelectorAll("li > a[target='_blank']"));

// We only need to worry about what's going to change
var newRel = 'noopener noreferrer'

// This will be the click event callback function
function doAlert(){
  alert('Hello World!');
}

// Loop over the array
elementsToChange.forEach(function(element){
  // Just access the HTML attribute you want to modify as a property of the JavaScript object
  element.rel = newRel;
    
  // Or, use the DOM API
  element.setAttribute("rel", newRel); 
  
  // Either way the DOM API should always be used to set up event handlers
  element.addEventListener("click", doAlert);
});

＆＃13;

<ul>
  <li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
  <li><a href="https://www.w3schools.com">I WON'T be modified by the code!</a></li>
  <li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
</ul>

＆＃13;

Answer 2

我认为你的意思是outerHTML

http://jsfiddle.net/rzy3ajhx/1/

strMessage1.outerHTML = strMessage1.outerHTML.replace(first, second);

Answer 3

据我了解，您正在尝试更改html标记中的属性。您无法使用.innerHTML或.replace来执行此操作，只会更改html标记内的内容。要解决您的问题，您可以使用.getAttribute()，.setAttribute()或.createAttribute()方法。类似于你的代码，它的工作原理：

var strMessage1 = document.getElementById("aId");
strMessage1.setAttribute("rel", "noopener noreferrer");
strMessage1.setAttribute("onClick", "alert(\'Hello World!\')")

Answer 4

您可以使用outerHTML将first的内容替换为second的内容。您可以使用相同的a电话选择第二个document.getElementById。

对于第三个，您可以使用document.querySelectorAll并获取返回集合的最后一项。

var strMessage1 = document.getElementById("aId");
var strMessage2 = document.getElementById("bId");
var anchors = document.querySelectorAll("a");
var strMessage3 = anchors[anchors.length - 1];

var first = 'target="_blank"';
var second = 'target="_blank" rel="noopener noreferrer" onClick="alert(\'Hello World!\')"';

strMessage1.outerHTML = strMessage1.outerHTML.replace(first, second);
strMessage2.outerHTML = strMessage2.outerHTML.replace(first, second);
strMessage3.outerHTML = strMessage3.outerHTML.replace(first, second);

<ul>
  <li>
    <a id="aId" href="https://www.w3schools.com" target="_blank"> Link1 </a>
  </li>
  <li>
    <a id="bId" href="https://www.w3schools.com" target="_blank"> Link2 </a>
  </li>
  <li>
    <a href="https://www.w3schools.com" target="_blank"> Link3 </a>
  </li>
</ul>

更好的编码实践

使用setAttribute()设置元素的各个属性，而不是进行替换。这可以防止不必要的错误。
您可以使用document.getElementById并在集合上循环来替换内容，而不是使用document.querySelectorAll和document.querySelectorAll选择单个元素。

Answer 5

Q1：bId id？

Ans1：我不知道你需要哪种元素。所以，我抓住了所有的标签。有一种获取元素的简单方法：document.querySelectorAll("query")

Q2：Link3，没有id？

Ans2：作为Q1。没有id的元素很好。

问题3：已编辑的代码无效。

答案3： .innerHTML 适用于<a>*here*</a>，您需要编辑属性，因此需要调用 .outerHTML

参考文献：

var all_a_tag = document.querySelectorAll("a");
for (var i = 0; i < all_a_tag.length; i++) {
  var elem = all_a_tag[i];
  var first = 'target="_blank"';
  var second = 'target="_blank" rel="noopener noreferrer" onClick="alert(\'Hello World!\')"';

  elem.outerHTML = elem.outerHTML.replace(first, second);
}

<ul>
  <li>
    <a id="aId" href="https://www.w3schools.com" target="_blank"> Link1 </a>
  </li>
  <li>
    <a id="bId" href="https://www.w3schools.com" target="_blank"> Link2 </a>
  </li>
  <li>
    <a href="https://www.w3schools.com" target="_blank"> Link3 </a>
  </li>
</ul>

用innerHTML替换HTML - Javascript

5 个答案: