Question

I am getting an unreliable result from the Tumblr API. When I get a single line of text, I receive just the text. When there are multiple lines, each line is wrapped in a <p> tag. So I either get:

This is a value with no second line

or

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

I want both to appear the same. I have been manually adding the <p> around the value, but this will result in:

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

on multi-line values.

I have a few thoughts on how to fix this, but am unsure which would be the best.

1. Create new CSS style p p {} such that offsets the screwed up styling
2. Use jQuery to take DOM contents of redundant <p> tags and make them non-redundant
3. Just load the text into a jQuery function, see if there are <p> tags, add them if not, then write the result into the DOM.

I’m not sure option 1 will work very well (particularly across browsers), and it seems a bit hacky. Any ideas on if either option 2 or 3 is better, and how I would implement?

Edit: Should’ve mentioned I’m playing with a Tumblr theme, so Python/PHP/ASP/etc are not available to me (that would make it easier for me!).

Answer 1

Match it first:

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

Instead of just adding the tags all the time.