使用基于HR标记的Javascript/JQuery在div中拆分HTML

我想根据HR标记将从Web服务接收的文章（=HTML内容）拆分为不同的div

我用一个例子解释，这是我从服务中得到的：

<p>This is an article bla bla</p> <hr/> <p>this is the next page of the article blabla ...</p>

这是一篇文章blabla
这是文章blabla的下一页

我想根据HR标签制作：

<div><p>This is an article bla bla</p></div>
<div><p>this is the next page of the article blabla ...</p></div>

这是一篇文章

这是文章的下一页布拉布拉

我尝试了不同的想法，但不起作用。如何使用Javascript或JQuery（或其他方法；-）实现这一点？

试试看-

var html = '<p>This is an article bla bla</p> <hr/> <p>this is the next page of the article blabla ...</p>'
var htmlarr = html.split('<hr/>');
html = html.replace(/<hr\/>/g,'');
$('body').append(html);

这将给您留下一个数组，其中包含您在问题中列出的两位HTML。您可以使用将其添加到页面中-

$.each(htmlarr,function (index,value) {
   $('body').append(value); 
});

---

演示-

使用split创建和排列并循环创建div

var html = "<p>This is an article bla bla</p> <hr/> <p>this is the next page of the article blabla ...</p>";


$(html.split('<hr/>')).each(function(){
    $('#test').append('<div>'+this+'</div>')
})

var html=“这是一篇文章blabla
这是文章blabla的下一页…
”；
$（html.split（“
”）。每个（函数（）{
$（'#test'）。追加（''+this+''）
})

---

但您最好注意拼写变化，如“

---

”、“

---

”等。考虑变化的正则表达式会更健壮。有关示例，请参见此答案：

var html = "<p>This is an article bla bla</p> <hr/> <p>this is the next page of the article blabla ...</p>";


$(html.split('<hr/>')).each(function(){
    $('#test').append('<div>'+this+'</div>')
})