是否有一種簡單的方法來轉換多個HTML <br/> 標簽到適當的周圍 <p> Javascript中的標簽？

Question

假設我有一堆HTML，如下所示：

bla bla bla long paragraph here
<br/>
<br/>
bla bla bla more paragraph text
<br/>
<br/>

有一個簡單的方法使用Javascript將其轉換為正確的語義<p>標簽嗎？ 例如：

<p>
  bla bla bla long paragraph here
</p>
<p>
  bla bla bla more paragraph text
</p>

輸出間距並不重要，理想情況下它可以用於任何輸入間距。

我想我可能會嘗試制作一個正則表達式，但在我這樣做之前，我想確保我是a）避免受傷的世界b）那里沒有別的東西 - 我試圖做谷歌搜索，但尚未提出任何建議。

謝謝你的建議！

Answer 1

我無聊。 我確信需要進行優化/調整。 使用一點點jQuery來實現它的魔力。 在FF3工作。 你的問題的答案是，有一個非常“簡單”的方式:)

$(function() {
  $.fn.pmaker = function() {
    var brs = 0;
    var nodes = [];

    function makeP()
    {
      // only bother doing this if we have nodes to stick into a P
      if (nodes.length) {
        var p = $("<p/>");
        p.insertBefore(nodes[0]);  // insert a new P before the content
        p.append(nodes); // add the children        
        nodes = [];
      }
      brs=0;
    }

    this.contents().each(function() {    
      if (this.nodeType == 3) // text node 
      {
        // if the text has non whitespace - reset the BR counter
        if (/\S+/.test(this.data)) {
          nodes.push(this);
          brs = 0;
        }
      } else if (this.nodeType == 1) {
        if (/br/i.test(this.tagName)) {
          if (++brs == 2) {
            $(this).remove(); // remove this BR from the dom
            $(nodes.pop()).remove(); // delete the previous BR from the array and the DOM
            makeP();
          } else {
            nodes.push(this);
          }
        } else if (/^(?:p)$/i.test(this.tagName)) {
          // these tags for the P break but dont scan within
          makeP();
        } else if (/^(?:div)$/i.test(this.tagName)) {
          // force a P break and scan within
          makeP();
          $(this).pmaker();
        } else {
          brs = 0; // some other tag - reset brs.
          nodes.push(this); // add the node 
          // specific nodes to not peek inside of - inline tags
          if (!(/^(?:b|i|strong|em|span|u)$/i.test(this.tagName))) {
            $(this).pmaker(); // peek inside for P needs            
          }
        } 
      } 
    });
    while ((brs--)>0) { // remove any extra BR's at the end
      $(nodes.pop()).remove();
    }
    makeP();
    return this;
  };

  // run it against something:
  $(function(){ 
    $("#worker").pmaker();
  });

這是我測試過的html部分：

<div id="worker">
bla bla bla long <b>paragraph</b> here
<br/>
<br/>
bla bla bla more paragraph text
<br/>
<br/>
this text should end up in a P
<div class='test'>
  and so should this
  <br/>
  <br/>
  and this<br/>without breaking at the single BR
</div>
and then we have the a "buggy" clause
<p>
  fear the real P!
</p>
and a trailing br<br/>
</div>

結果如下：

<div id="worker"><p>
bla bla bla long <b>paragraph</b> here
</p>
<p>
bla bla bla more paragraph text
</p>
<p>
this text should end up in a P
</p><div class="test"><p>
  and so should this
  </p>
  <p>
  and this<br/>without breaking at the single BR
</p></div><p>
and then we have the a "buggy" clause
</p><p>
  fear the real P!
</p><p>
and a trailing br</p>
</div>

Answer 2

掃描每個子元素+封閉元素的文本。 每次遇到“br”元素時，都要創建一個“p”元素，並將所有待處理的內容附加到其中。 泡沫，沖洗，重復。

不要忘記刪除要重新定位到新“p”元素的內容。

我發現這個庫（prototype.js）對這類東西很有用。

Answer 3

我假設你並沒有真正允許任何其他有時你需要保留單個換行符（並非所有<br />元素都不好），而你只想將<br />雙重實例轉換為段落符號。

這樣做我會：

1. 刪除所有換行符
2. 將整個部分包裝在一個段落中
3. 用</p>\\n<p>替換<br /><br />
4. 最后，刪除可能已生成的任何空<p></p>元素

所以代碼看起來像：

var ConvertToParagraphs = function(text) {
    var lineBreaksRemoved = text.replace(/\n/g, "");
    var wrappedInParagraphs = "<p>" + lineBreaksRemoved + "</p>";
    var brsRemoved = wrappedInParagraphs.replace(/<br[^>]*>[\s]*<br[^>]*>/gi, "</p>\n<p>");
    var emptyParagraphsRemoved = brsRemoved.replace(/<p><\/p>/g, "");
    return emptyParagraphsRemoved;
}

注意：我一直非常詳細地展示過程，當然你會簡化它。

這會變成你的樣本：

bla bla bla long paragraph here
<br/>
<br/>
bla bla bla more paragraph text
<br/>
<br/>

成：

<p>bla bla bla long paragraph here</p>
<p>bla bla bla more paragraph text</p>

但它這樣做不拆卸任何<br /> ，你可以真正想要的元素。

Answer 4

我會分幾個階段完成：

1. RegExp：將所有br-tag轉換為換行符。
2. RegExp：刪除所有空白區域。
3. RegExp：將多個換行符轉換為單個換行符。
4. 在結果上使用Array.split（'\\ n'）。

這應該給出一個包含所有“真實”段落的數組（理論上）。然后你可以迭代它並將每一行包裝在p-tags中。