如何确保多余的 标签不会破坏样式？答案

【问题标题】：How can I make sure redundant tags do not break styling?如何确保多余的 标签不会破坏样式？
【发布时间】：2011-06-11 22:34:27
【问题描述】：

我从 Tumblr API 获得的结果不可靠。当我得到一行文本时，我只收到文本。当有多行时，每行都包含在 标记中。所以我要么得到：

This is a value with no second line

或

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

我希望两者看起来相同。我一直在值周围手动添加，但这会导致：

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

关于多行值。

我对如何解决这个问题有一些想法，但不确定哪个是最好的。

创建新的 CSS 样式 p p {} 以抵消搞砸的样式
使用jQuery获取冗余标签的DOM内容并使其成为非冗余
只需将文本加载到一个jQuery函数中，看看是否有标签，如果没有，添加它们，然后将结果写入DOM。

我不确定选项 1 是否能很好地工作（尤其是跨浏览器），而且它似乎有点 hacky。关于选项 2 或 3 是否更好，以及我将如何实施的任何想法？

编辑：应该提到我正在玩 Tumblr 主题，所以我无法使用 Python/PHP/ASP/etc（这对我来说更容易！）。

【问题讨论】：

@Zac 只需在字符串中搜索"" 序列。如果不存在，请将字符串包装在 "" 标记中。
@Michael 如果消息中有 no "" 序列，您会将字符串包装在 P 标签中only。如果消息是多行的，则消息中至少有两个"" 序列，因此您不会将字符串包装在 P 标记中......
@Sime - 灯光已显示，我收回我的评论。干杯！
不要选择选项 1，因为您的 HTML 无效。
@melhosseiny - 我同意。但是如果他使用 jquery 作为修复，HTML 无论如何都是无效的。禁用javascript，您仍然遇到同样的问题;)

标签： jquery css tumblr

【解决方案1】：

为什么不直接

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

因此，如果您的字符串中没有出现一次"" 字符串，这意味着结果是“单行”，您需要将其包装在"" 标记中。

【讨论】：

【解决方案2】：

先匹配：

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

而不是一直添加标签。

【讨论】：

试图编辑响应以在正则表达式中转义未转义的斜杠，但 SO 不会接受仅一个字符的编辑。正则表达式应为 /^\s*.+<\/p>$/，因为都不需要擒纵。

【解决方案3】：

在您的选择中，我认为选项 3 是最好的选择。不过，我还有一个可能有用的想法：

我不确定您正在开发什么平台（php/asp.net/etc..），您也可以在前端执行此操作。

接收消息（1 行或多行）
使用您的平台split 函数根据换行符的搜索将字符串拆分为数组
遍历数组值并删除所有（如果有）
再次迭代并在每个数组索引前添加  
将每个数组字符串截断为一个字符串，并输出到dom中

维奥拉！无论是 1 行还是 10 行，没有  或 10 ，您都可以依赖该功能。

此方法将“面向未来”应用程序的这一部分，因为正如我们所见，有时公司会在没有警告的情况下快速更改 api 的返回结果，或更改 api 的工作方式

【讨论】：

【解决方案4】：

假设 PHP；并且字符串格式是否一致~

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

【讨论】：

【解决方案5】：

另一种解决方案可能是将所有/<\/p>[^<]*/g 替换为 ，这将保留多行段落中的换行符。

【讨论】：