Javascript 解析html字符串并在每个标题前追加新的div

我有一个变量，它包含html return作为一个来自API的字符串，如下所示：

const myHTML = "<h2>Lorem</h2><p>ipsupm</p><h3>second header</h3><h3>third header !!</h3>"

第二个标题第三个标题！！” 我如何解析它并在每个标题之前添加一个div，比如

”

，无论它是h1、h2还是h3

---

提前感谢：）

如果我得到了你想要的，很容易：）

只需创建一个div元素：

const divElement = document.createElement("div");

现在可以添加此元素：

const myHTML = `<h2>lorem</h2> ${divElement} <p>ipsump</p>`;

constmyhtml=`lorem${divElement}ipsump
`；

我希望这就是你要找的。

你的意思是

class='separator

constmyhtml=“Loremipsupm
secondheaderthird header！！”；
const newmyHTML=myHTML.replaceAll（“”，“”）。replaceAll（“”，“”）。replaceAll（“”，“”）
console.log（newmyHTML）

可用于将字符串转换为DOM树：

var parser = new DOMParser();
var htmlDOM = parser.parseFromString(myHTML, "text/xml");

然后以与全局

文档

相同的方式对其进行操作。要选择所有标题，可以使用

queryselectoral（）

方法：

const headers = document.querySelectorAll("h1, h2, h3");

此方法返回

NodeList

，该方法实现了对所有选定元素进行迭代的

forEach

方法

对于附加

div

s，

insertBefore（）

方法可能会有所帮助。要使用它，首先需要选择要插入新节点的节点的父节点（每个节点都有一个

parentNode

属性），然后插入

div

：

parentNode.insertBefore(yourNewDiv, headerNode);

---

您可以创建任意元素，将字符串添加为HTML

.innerHTML

，并像在浏览器中那样对其进行操作

constmyhtml=“Loremipsupm
secondheaderthird header！！”；
const div=document.createElement（'div'）；
div.innerHTML=myHTML；
const headers=div.querySelectorAll（'h1，h2，h3'）；
headers.forEach（h=>{
常量分隔符=document.createElement（'div'）；
separator.className='separator'；
插入前分区（分隔符，h）；
})
updatedHTML=div.innerHTML；
log（更新的HTML）一种方法是：

使用RegExp在每个标题前添加分隔符div（
）
创建一个div并将其
innerHTML
设置为新的HTML字符串
将新div附加到主体

//0。原始HTML字符串
const myHTML=“Loremipsupm
second header第三个header！！”
// 1. 使用RegExp在每个标题前添加分隔符div
const newHTML=myHTML.replace（/（）/g，$1'）；
// 2. 创建一个div并将其innerHTML设置为新的HTML字符串
const container=document.createElement（'div'）；
container.innerHTML=newHTML；
// 3. 将新div附加到主体
document.querySelector（'body'）。append（container）
分隔符{
高度：2倍；
宽度：100%；
背景色：#EFEF；
}
标题周围有一个div，而不是在前面插入一个。哦，好的，让我编辑一下。谢谢，我选择了第二种解决方案，效果非常好，非常感谢！有一个问题，我读到在html上使用正则表达式是不正确的编码，对吗？我不太明白你（或写这篇文章的人）说的“正确编码”是什么意思，就像它是“脏代码”，如果有其他解决方案，就不应该这样做。我认为没有唯一的答案；我认为这要视情况而定。我不知道为什么要将HTML字符串作为起始点，也不知道是否可以避免，但是，一旦有了它，在处理字符串时添加分隔符div（因此可以使用
string.replace（）
）比立即解析起始HTML字符串然后选择所有标题更方便，循环遍历它们，并在每个之前插入一个div。如果情况不同，可能会有不同的解决方案。好的，非常感谢您的见解，您帮了我很多忙！：）不。当您尝试将新创建的元素插入字符串模板时，它不会“转换”为相应的HTML代码，而是转换为其
toString（）
方法返回的任何内容。在代码中，
myHTML
的值将被设置为类似于
的“lorem[object htmldevelment]ipsump
”
而不是
“loremipsump
”