Question

我有这个

str = testString.replace(/<div style="(.*?)">(.*?)<\/div><div style="\1">/g, '<div style="$1">$2<br>');

删除

<div style="text-align: right;">text1</div>
<div style="text-align: right;">text2</div>

进入

<div style="text-align: right;">
    text1<br>text2
</div>

大！

如果我有多个<div>，该怎么办？

我该如何制作

<div style="text-align: right;">text1</div>
<div style="text-align: right;">text2</div>
<div style="text-align: right;">text3</div>
<div style="text-align: right;">text4</div>

进入

<div style="text-align: right;">
    text1<br>text2<br>text3<br>text4
</div>

Answer 1

假设您已经从DOM中选择了first元素...

var next = first.nextElementSibling;

while (next && next.nodeName.toUpperCase() === "DIV") {
    first.appendChild(document.createElement('br'))
    first.appendChild(next.firstChild)
    next = next.nextElementSibling
}

刚才意识到我们没有从DOM中删除空div。如果你想要，你可以这样做......

var next;

while ((next = first.nextElementSibling) && next.nodeName.toUpperCase() === "DIV") {
    first.appendChild(document.createElement('br'))
    first.appendChild(next.firstChild)
    next.parentNode.removeChild(next);
}

Answer 2

您无法使用正则表达式进行复杂的HTML操作！请see this question。您可以使用jQuery操作DOM来实现相同的结果！

<强> Please see this jsfiddle example for a possible alternative.

这是来自小提琴的jQuery代码，假设所需的div位于包含ID为toParse的包装div中。

$('body').ready(function() {

var template = $('#toParse div').first().clone();

var result = "";
$('#toParse div').each(function(index, element) {
    result += $(element).html();
    result += "<br/>";
});

// you can add some extra code here to remove that 
// extra final <br/>

$('#toParse').html($(template).html(result));
console.log(result); 
});

将几个div变为一个

2 个答案: