2

我有这个

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>

?

4

2 回答 2

1

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

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);
}
于 2012-07-12T12:25:02.050 回答
0

您不能将正则表达式用于复杂的 HTML 操作！请看这个问题。您可以使用 jQuery 操作 DOM 来实现相同的结果！

请参阅此 jsfiddle 示例以获取可能的替代方法。

这是小提琴中的 jQuery 代码，假设所需的 div 位于带有 id 的包装 div 中toParse。

$('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); 
});​
于 2012-07-12T12:21:15.843 回答