Wie kann ich sicherstellen, dass redundante -Tags nicht das Styling brechen?

Question

Ich bekomme ein unzuverlässiges Ergebnis aus der Tumblr -API. Wenn ich eine einzelne Textzeile bekomme, erhalte ich nur den Text. Wenn es mehrere Zeilen gibt, ist jede Zeile in a eingewickelt <p> Schild. Also bekomme ich entweder:

This is a value with no second line

oder

<p>This is a value</p>
<p>with a second line</p>

Ich möchte, dass beide gleich erscheinen. Ich habe das manuell hinzugefügt <p> um den Wert um den Wert, aber dies wird zu:

<p><p>This is a value</p>
<p>with a second line</p></p>

auf Mehrzeilenwerte.

Ich habe ein paar Gedanken darüber, wie ich das beheben kann, bin mir aber nicht sicher, welches das Beste wäre.

1. Erstellen Sie einen neuen CSS -Stil p p {} so dass das durcheinander
2. Verwenden Sie JQuery, um DOM -Inhalte von redundant zu nehmen <p> Tags und machen sie nicht redundant
3. Laden Sie den Text einfach in eine JQuery -Funktion und prüfen Sie, ob es vorhanden ist <p> Tags, fügen Sie sie hinzu, wenn nicht, und schreiben Sie das Ergebnis in das DOM.

Ich bin mir nicht sicher, ob Option 1 sehr gut funktioniert (insbesondere in den Browsern), und es scheint ein bisschen hackig. Irgendwelche Ideen, ob entweder Option 2 oder 3 besser ist und wie ich implementieren würde?

Bearbeiten: hätte erwähnen, dass ich mit einem Tumblr -Thema spiele, also stehen mir Python/PHP/ASP/etc nicht zur Verfügung (das würde es mir einfacher machen!).

Answer 1

Passen Sie es zuerst an:

result = /^\s*\<p\>.+\<\/p\>$/.test(result) ? result : '<p>' + result + '</p>';

Anstatt die Tags ständig hinzuzufügen.

Answer 2

Warum nicht nur

if ( str.indexOf('<p>') === -1 ) {
   str = '<p>' + str + '</p>';    
}

Also, wenn es kein einziges Ereignis der "<p>" Zeichenfolge in Ihrer Zeichenfolge, dies bedeutet, dass das Ergebnis "Single-Line" ist und Sie es einwickeln müssen "<p>" Stichworte.

Answer 3

Ich denke, Option 3 ist der beste Weg. Ich habe jedoch eine andere Idee, die nützlich sein könnte:

Ich bin mir nicht sicher, auf welcher Plattform Sie sich entwickeln (PHP/ASP.NET/etc ..), und Sie könnten dies wahrscheinlich auch im vorderen Ende tun.

1. Empfangen Sie die Nachricht (1 oder mehr Zeilen)
2. Verwenden Sie Ihre Plattformen split Funktion zum Aufteilen der Zeichenfolge in ein Array basierend auf einer Suche nach dem Newline -Zeichen
3. durch Arraywerte iterieren und alle entfernen <p>'s, wenn es welche gibt
4. erneut iterieren und vorbereiten und anhängen a <p> </p> zu jedem Array -Index
5. Schneiden Sie jede Array -Zeichenfolge in eine Zeichenfolge ab und geben Sie an die DOM aus

Viola! Ob seine 1 Zeile oder 10 Zeilen, nein <p>'s oder 10 <p>Sie können sich auf die Funktionalität verlassen.

Diese Methode würde dieses Segment Ihrer Anwendung "zukunftssicher" "

Answer 4

Annahme von PHP; und wenn das String -Format konsistent ist ~

$str = 'hello world';
//$str = '<p>a string with a p tag</p>';

if(substr($str,0,3)=='<p>') {

    echo $str;

} else {

    echo '<p> ' . $str . '</p>';

}

// <p>hello world</p>
// <p>a string with a p tag</p>

Answer 5

Eine andere Lösung könnte sein, alle zu ersetzen /<\/p>[^<]*<p>/g mit <br/> Dies würde Linienbrüche in multiline Absätzen bewahren.