使用Javascript替换文本而不会丢失内部标签

Question

假设我有一个字符串：

var firstString = "<h3>askhaks</h3><h3>1212</h3><h1 style='color:red;
text-decoration:underline;'><a href=''><span id='123'><i class='fa fa-inr'></i> 
</span> Hello! Admin</span></a></h1><p>This is the content of page 'String 
Replace in Javascript'</p><h1>First</h1><span><h1>Hello! Admin</h1>Thank You for 
visiting this page</span><h1>Third</h1>";

我想更改第一个<h1>标签的文本，而不丢失所有其他内部标签，即<a href=''><span id='123'><i class='fa fa-inr'></i> </span>

只想替换你好！以其他文字管理。我可以用下面的代码替换第一个<h1>标签的文本，而不会丢失添加到<h1>的内联样式，但是我丢失了内部标签。

var innerText = document.getElementsByTagName('h1')[0].innerHTML;

如何实现？

Answer 1

如果要更改文本 ，然后将其插入文档，可以在输入的HTML字符串上使用DOMParser，将其修剪后的textContent，然后{ {1}}输入中包含所需字符串的子字符串，从而保留所有HTML标签：

replace

Answer 2

document.getElementsByTagName（“ h1”）。innerHTML =“ Hello！”;

Answer 3

如果它不在DOM中，而是一个字符串，则可以使用正则表达式来代替：

str.replace(“(<h1>)(.+)(<\/h1>)”, “$1YOUR_NEW_TEXT$2”);