ASP.NET MVC 4 Razor视图中如何遍历<p>标签并封装到独立div

方案一：后端使用HTML解析库处理（推荐） #

这种方法最可靠，因为它能正确解析HTML结构，避免字符串分割带来的各种边缘问题。我们可以用HtmlAgilityPack这个轻量库来处理：

步骤： #

1. 首先通过NuGet安装HtmlAgilityPack：

   Install-Package HtmlAgilityPack
   

2. 在控制器或模型中解析HTML，提取所有<p>标签的内容：

   using HtmlAgilityPack;
   
   public ActionResult YourAction()
   {
       var yourModel = new YourViewModel();
       // 假设这是模型中的带p标签的字符串属性
       yourModel.RichContent = "<p>这是第一段内容</p><p>第二段包含<b>加粗</b>文本</p><p>第三段</p>";
   
       var htmlDoc = new HtmlDocument();
       htmlDoc.LoadHtml(yourModel.RichContent);
   
       // 获取所有p标签，提取它们的内部HTML
       var paragraphs = htmlDoc.DocumentNode.SelectNodes("//p")
           ?.Select(p => p.InnerHtml)
           .ToList() ?? new List<string>();
   
       // 可以把段落列表存入ViewBag，或者添加到模型的新属性中
       ViewBag.ProcessedParagraphs = paragraphs;
       return View(yourModel);
   }
   

3. 在Razor视图中遍历渲染：

   @foreach (var para in ViewBag.ProcessedParagraphs as List<string>)
   {
       <div class="your-target-class">@Html.Raw(para)</div>
   }
   

   这里用@Html.Raw()是为了保留段落内部的HTML格式（比如加粗、链接等），避免被编码成纯文本。

方案二：前端JavaScript处理 #

如果不想在后端引入额外库，可以在客户端完成拆分和包裹：

Razor视图代码： #

<!-- 先把原始内容渲染到隐藏容器 -->
<div id="raw-content" style="display: none;">@Html.Raw(Model.RichContent)</div>

<!-- 最终展示的容器 -->
<div id="final-content"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const rawContainer = document.getElementById('raw-content');
    const finalContainer = document.getElementById('final-content');
    const pTags = rawContainer.querySelectorAll('p');

    pTags.forEach(p => {
        const div = document.createElement('div');
        div.classList.add('your-target-class');
        div.innerHTML = p.innerHTML;
        finalContainer.appendChild(div);
    });
});
</script>

这种方法的优点是无需后端改动，但缺点是内容依赖JavaScript渲染，对SEO不太友好。

方案三：字符串分割（仅适用于极简单场景） #

如果你的<p>标签格式非常规整（没有嵌套标签、没有额外属性），可以用字符串分割临时解决，但不推荐用于复杂场景：

@{
    // 按</p>分割，去除空项，再去掉每个项开头的<p>
    var paragraphs = Model.RichContent.Split(new[] { "</p>" }, StringSplitOptions.RemoveEmptyEntries)
        .Select(p => p.Replace("<p>", "").Trim());
}

@foreach (var para in paragraphs)
{
    <div class="your-target-class">@Html.Raw(para)</div>
}

这种方法容易出错，比如遇到<p class="foo">或者嵌套标签时就会失效，所以只建议在测试或极端简单的场景下使用。

内容的提问来源于stack exchange，提问作者john.1020