Est-il un moyen facile de convertir le HTML avec plusieurs balises dans les balises appropriées environnantes Javascript?

Question

Disons que j'ai un tas de HTML comme ci-dessous:

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

Y at-il un moyen facile avec JavaScript pour le convertir en balises sémantiques <p> correctement? Par exemple:.

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

espacement de sortie n'est pas important, idéalement, il travaillera avec tout espacement d'entrée.

Je pense que je pourrais essayer de concocter une expression régulière, mais avant que je fais ce que je voulais vous assurer que j'étais) en évitant un monde de souffrance et b) il n'y avait pas autre chose là-bas - je serais essayé de faire une recherche google, mais pas encore arriver à quelque chose.

Merci pour tout conseil!

Answer 1

Je me suis ennuyé. Je suis sûr qu'il ya des optimisations / réglages nécessaires. Utilise un peu de jQuery pour faire sa magie. A travaillé dans FF3. Et la réponse à votre question est que il ny a pas une façon très « simple »:)

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

Et ce fut la partie html j'ai testé contre:

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

Et le résultat:

<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

Analyser chacun des éléments de l'enfant + texte de l'élément englobante. Chaque fois que vous rencontrez un élément « br », créer un élément « p », et ajouter toutes choses en attente à elle. Faire mousser, rincer, répéter.

Ne pas oublier d'enlever les trucs que vous déplacez à un nouvel élément « p ».

J'ai trouvé cette bibliothèque (prototype.js) être utile pour ce genre de chose.

Answer 3

Je suppose que vous ne permettez pas vraiment d'autre Parfois, vous devez préserver sauts de ligne unique (pas tous les éléments <br /> sont mauvais), et que vous voulez transformer doubles instances de <br /> en sauts de paragraphe.

Ce faisant, je voudrais:

1. Supprimer tous les sauts de ligne
2. Enveloppez le tout dans un paragraphe
3. Remplacez <br /><br /> avec </p>\n<p>
4. Enfin, supprimez tous les éléments <p></p> vides qui auraient pu être générés

Ainsi, le code pourrait ressembler à:

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

Remarque:. Je suis très bavard pour montrer les processus, vous auriez simplifiez bien sûr

transforme votre échantillon:

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

Dans:

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

Mais il le fait sans enlever aucun élément de <br /> que vous pouvez réellement vouloir.

Answer 4

Je le ferais en plusieurs étapes:

1. RegExp:. Convertir tous les br-tags à sauts de ligne
2. RegExp. Strip toutes les espaces blancs
3. RegExp: Convertir les multiples sauts de ligne à ceux simples
.
4. Utilisation Array.split ( '\ n') sur le résultat.

Cela devrait donner un tableau avec tous les paragraphes « réels » (en théorie). Ensuite, vous pouvez simplement itérer et envelopper chaque ligne p-tags.