Html.Raw意外拆分字符串：为何包裹的p标签被拆分？

嘿，这问题其实挺常见的，我一眼就get到症结啦！

你遇到的核心问题是**shopItem.ShortDescription本身已经包含了完整的<p>标签**（就像你给出的示例：<p><em><strong>Title</strong></em></p>），而你又在视图代码里手动给它套了一层<p class='description short'>——相当于给已经带p标签的内容再包了个p，自然就会生成两个独立的p标签了！

下面给你几个针对性的解决方案：

解决方案1：更换外层容器标签 #

如果你想保留用户输入的HTML结构（包括里面的p标签），同时给整个描述区域添加样式，别再用p当外层容器了，换成<div>或者其他块级元素就行：

<div class='description short'>@Html.Raw(shopItem.ShortDescription)</div>

之后你可以通过CSS来控制内部p标签的样式，比如：

.description.short p {
  margin: 0;
  font-size: 14px;
  /* 其他自定义样式 */
}

解决方案2：移除描述内容自带的p标签 #

如果你确定不需要用户输入内容里的p标签，那可以先清理掉再输出，这里分两种场景：

方式A：后端正则清理（简单场景） #

如果描述内容的p标签结构不复杂（没有嵌套或额外属性），可以用正则表达式移除首尾的p标签：

// 在后端逻辑中处理（比如Controller或ViewModel里）
using System.Text.RegularExpressions;

var cleanedDesc = Regex.Replace(shopItem.ShortDescription, @"^<p[^>]*>(.*)</p>$", "$1", RegexOptions.Singleline);

然后视图里直接输出：

<p class='description short'>@Html.Raw(cleanedDesc)</p>

⚠️ 注意：正则处理HTML有局限性，如果内容里有嵌套标签或复杂结构，可能会出错，这种情况更推荐用专门的HTML解析库。

方式B：用HTML解析库处理（复杂场景） #

比如使用HtmlAgilityPack来精准移除外层p标签：

// 先安装NuGet包：HtmlAgilityPack
var doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(shopItem.ShortDescription);
var pNode = doc.DocumentNode.SelectSingleNode("//p");
var cleanedDesc = pNode?.InnerHtml ?? shopItem.ShortDescription;

之后再在视图里输出处理后的内容即可。

解决方案3：从源头避免——调整富文本编辑器设置 #

如果用户是通过富文本编辑器输入描述的，大概率是编辑器默认给内容自动添加了p标签。你可以去编辑器的设置里关掉这个默认行为，让用户输入的内容不带外层p标签，这样视图里的代码就能正常工作了。

⚠️ 重要提醒：直接输出用户提交的HTML存在XSS攻击风险！如果你的用户是不可信的（比如普通注册用户），一定要先对输入内容做XSS过滤，比如用Microsoft.AspNetCore.Html.HtmlEncoder或者专门的过滤库来清理危险标签和属性。

内容的提问来源于stack exchange，提问作者WhoMightThisOneBe