我正在接收各种格式的 HTML,我正在尝试使用 jQuery 来标准化代码。在某些情况下,我会使用 break <br>
来接收它分隔线。我需要这些是 <div>
(或 <p>
)标签。例如下面的代码:
a<br>b<br>c
需要转换成
<div>a</div><div>b</div><div>c</div>
这是一个简单的案例,因为a
中的内容可以被各种包围<font>
, <span>
和其他格式选项,所有这些都需要保留。
这是我的第一次尝试。它找到所有 <br>
整个文档中的标签然后访问父级的内容以获取 <br>
周围的所有 HTML .如果内容长度为 1,则 <br>
是那里唯一的元素(意思是空行)所以跳到下一个。否则查看每个元素,用 <div>
包围它(或 <p>
)并删除 <br>
因为不再需要它了。变量 wrapper
是 "<div />"
或 "<p />"
取决于浏览器。
$("br").each(function() {
// Find all the br tags' parent nodes
var elements = $(this).parent().contents();
if (elements.length > 1) {
// If there is one element than it is br so skip on.
elements.each(function() {
// Loop through each child element of the parent
var nodeName = this.nodeName.toLowerCase();
if (nodeName !== 'div' && nodeName !== 'p') {
// Make sure each child that is not <br> is wrapped. Remove <br> tags.
if (nodeName == 'br') {
$(this).remove();
} else {
$(this).wrap(wrapper);
}
}
});
}
});
但这不起作用,因为它添加了 <div>
(或 <p>
)标记在每个子元素周围,类似于 <font>a</font>bc<br>de<b>f</b>
最终像
<div><font>a</font></div>
<div>bc</div>
<div>de</div>
<div><b>f</b></div>
真正需要的时候
<div><font>a</font>bc</div>
<div>de<b>f</b></div>
(为了便于阅读,我将其拆分。)
如果我在文本解析器中执行此操作,我会像上面对变量 elements
所做的那样找到内容, 添加一个 <div>
在开头和一个</div>
最后,然后替换每个 <br>
与 </div><div>
(除非它已经是 <div><br></div>
,此时我会跳过它)。我不知道如何在 jQuery/Javascript 中执行此操作。不过,尤其是关于替换 <br>
与 </div><div>
部分。 (第一部分是 elements.wrap(wrapper)
。)
如果您对此方法或替代方法有任何帮助,我们将不胜感激。
---更新---
@Ian 提供了必须的有效代码。我稍微扩展了一下,想把它放在这里。我已经在 FF、Safari、Chrome 和 IE 9+ 中对其进行了测试。
$("br").each(function(idx, el) {
var $el = $(el),
$parent = $el.parent(),
$contents = $parent.contents(),
$cur, $set, i;
$set = $();
if ($contents.length > 1) {
for (i = 0; i < $contents.length; i++) {
$cur = $contents.eq(i);
if ($cur.is("br")) {
$set.wrapAll(wrapper);
$cur.remove();
$set = $();
} else {
$set = $set.add($cur);
}
}
$set.wrapAll(wrapper);
}
});
最佳答案
我的建议是将文本拆分为 <br>
:
var lines = content.split("<br>");
现在您可以将每一行包装在 <div>
中:
var newContent = "";
for(var i=0,l=lines.length;i<l;i++){
newContent += "<div>"+lines[i]+"</div>";
}
关于javascript - 将 <br> 标签转换为 <Div> 或 <P> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18494385/