Gibt es eine einfache Möglichkeit, HTML mit mehreren -Tags in die richtige Umgebung -Tags in Javascript zu konvertieren?

Question

Lassen Sie uns sagen, dass ich eine Reihe von HTML haben wie folgt:

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

Gibt es eine einfache Möglichkeit, mit Javascript, um richtig semantischer <p> Tags zu konvertieren? Z.

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

Ausgabeabstand nicht wichtig ist, im Idealfall wird es mit jedem Eingabeabstand arbeiten.

Ich denke, ich könnte versuchen, einen regulären Ausdruck, um zu kochen, aber bevor ich das tue, dass ich ein, dass ich war) zu vermeiden, eine Welt von Schmerz und b) es war nicht etwas anderes da draußen machen wollte - ich würde versucht, eine google-Suche zu tun, aber noch nicht mit etwas einfallen lassen.

Vielen Dank für jeden Hinweis!

Answer 1

I got bored. Ich bin sicher, es gibt Optimierungen / Verbesserungen erforderlich. Verwendet ein wenig jQuery seine Magie zu tun. Arbeitete in FF3. Und die Antwort auf Ihre Frage ist, dass es eine sehr „einfache“ Art und Weise ist nicht:)

$(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();
  });

Und dies war der HTML-Teil I getestet gegen:

<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>

Und das Ergebnis:

<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

Scannen jedes der untergeordneten Elemente + Text des einschließenden Element. Jedes Mal, wenn Sie ein „br“ Element auftreten, erstellen Sie ein „p“ Element, und fügen Sie alle anstehenden Sachen zu. Lather, spülen, wiederholen.

Vergessen Sie nicht, das Zeug zu entfernen, die Sie zu einem neuen „p“ Elemente verlagern.

ich gefunden habe, diese Bibliothek (prototype.js) für diese Art nützlich zu sein von Sache.

Answer 3

Ich nehme an, Sie sind nicht wirklich andere erlaubt Manchmal braucht man einzelne Zeilenumbrüche (nicht alle <br /> Elemente sind schlecht) zu erhalten, und Sie wollen nur doppelte Instanzen <br /> in Absatzumbrüche machen.

Dabei würde ich:

1. Entfernen alle Zeilenumbrüche
2. Wickeln Sie die ganze Menge in einem Absatz
3. Ersetzen <br /><br /> mit </p>\n<p>
4. Schließlich entfernen Sie alle leeren <p></p> Elemente, die erzeugt wurden, könnte

So ist der Code etwas aussehen könnte:

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

. Hinweis: Ich habe sehr ausführliche gewesen, die Prozesse zu zeigen, können Sie es natürlich vereinfachen würde

Damit wird Ihr Beispiel:

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

In:

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

Aber es tut so ohne <br /> Elemente zu entfernen, die Sie tatsächlich wollen.

Answer 4

ich es in mehreren Schritten tun würde:

1. RegExp. Wandeln Sie alle br-Tags Zeilenumbrüche
2. RegExp. Strip aus all den white-space
3. RegExp: Konvertieren Sie die mehrere Zeilenumbrüche auf einzelne diejenigen
.
4. Verwenden Sie Array.split ( '\ n') auf das Ergebnis.

Das sollte einen Array mit allen ‚echten‘ Abschnitten geben (in der Theorie). Dann können Sie einfach durchlaufen und jede Zeile in p-Tags wickeln.