DOM元素僅替換為“開始標記”（或“結束標記”）

Question

我使用Blogger作為我的博客平台。 令人討厭的是，在RTF編輯器中按Enter鍵會創建<br />（換行）標簽，而不是<p> </ p>（段落標簽）標簽。 不幸的是，我發現沒有辦法在Blogger平台中進行切換。

所以我的解決方案是使用jQuery將每個<br />偶數<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>代替

關於如何執行此操作的任何建議？

謝謝！

（也請不要建議我切換到另一個實際滿足我期望的博客平台。我不希望這樣做，也不能真正回答我的問題。）

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>

將會變成一棵有1個父母和3個孩子的樹，像這樣：

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

您可以做的是提取br標簽之間的文本並將其放在段落中。