0

我使用 Blogger 作为我的博客平台。烦人的是，在富文本编辑器中按 Enter 会创建 <br />（换行符）标签而不是 <p></p>（段落标签）。不幸的是，我没有找到在 Blogger 平台内切换它的方法。

所以我的解决方案是使用 jQuery 将每个偶数 <br /> 标记替换为一个开始 <p> 标记，并将每个奇数 <br /> 替换为一个结束 </p> 标记，如下所示。

<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>");
    }
})

但是，我没有得到上面的结果，而是发现每个 <br /> 标记都被替换为开始和结束标记 <p></p>

关于我如何去做这件事的任何建议？

谢谢！

（并且请不要建议我切换到另一个真正按照我的意图做的博客平台。我不想这样做，它也没有真正回答我的问题。）

4

3 回答 3

3

您只能将完整节点附加到 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();
于 2013-10-30T17:39:27.723 回答
3 
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 字符串写回页面。

于 2013-10-31T00:37:52.027 回答
1

您正在混淆 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标签之间的文本并将其放在段落中。

于 2013-10-30T17:38:22.550 回答