Question

我使用Blogger作为我的博客平台。令人讨厌的是，点击进入富文本编辑器创建＆lt; br /＆gt; （换行符）代码而不是＆lt; p＆gt;＆lt; / p＆gt; （段落标签）。不幸的是，我发现没有办法在Blogger平台内切换它。

所以我的解决方案是使用jQuery替换每个偶数＆lt; br /＆gt;带开头的标签＆lt; p＆gt;标签和每个奇数＆lt; br /＆gt;关闭＆lt; / p＆gt;标签如下。

<br /> (replace with <p>)
Some initial paragraph
<br /> (replace with </p>)
<br /> (replace with <p>)
Some second paragraph
<br /> (replace with </p>)
<br /> (replace with <p>)
Some third paragraph
<br /> (replace with </p>)

为此，我写了下面的jQuery。

$("br").each(function(i){
    if (i % 2 === 0){
        $(this).replaceWith("<p>");
    } else {
        console.log("odd break");
        $(this).replaceWith("</p>");
    }
})

然而，我没有得到上面的结果，而是发现每个＆lt; br /＆gt;标签被开始和结束标签＆lt; p＆gt;＆lt; / p＆gt;

替换

关于如何做到这一点的任何建议？

谢谢！

（请不要建议我切换到另一个实际上按照我的意图行事的博客平台。我不希望这样做，也不会真正回答我的问题。）

Answer 1

您只能将完整节点附加到dom。一种解决方案是将文本节点包装在<p>元素中并删除<br> s：

http://jsfiddle.net/MYFQV/

$('#content').contents().filter(function() {
   return this.nodeType == 3 && $.trim($(this).text()).length > 0; 
}).wrap('<p/>');
$('#content br').remove();

Answer 2

var s = $('#content').html();
var i = -1;
s = s.replace(/<br \/>/gi, function() {
    i++;
    return i % 2 == 0 ? '</p>' : '<p>';
}, 'gi');
$('#content').html(s);

这将HTML作为文本读取，使用正则表达式将<br />的每个实例替换为正确的打开或结束标记，然后将HTML字符串写回页面。

Answer 3

你正在混淆HTML标签汤和DOM。

当在浏览器中访问页面时，它（浏览器）解析HTML代码（标签）并创建DOM元素。它不会非常关心HTML的有效性，例如：

<div id="parent>
  <p>
  One paragraph
  <div>Split</div>
  Another paragraph
  </p>
</div>

将变成一棵树，一个父母和三个孩子就像这样：

#parent 
  p > text(One Paragraph)    
  div > text(Split)
  text(Another paragraph)

您可以做的是在br标签之间提取文字并将其放在段落中。

将DOM元素替换为仅打开标记（或关闭标记）

3 个答案: