ASP.NET Razor中如何为字符串引号包裹内容单独应用CSS样式

完全可以对字符串的局部子内容单独设置样式，不需要前端JS介入，直接在cshtml渲染阶段做正则替换即可实现需求：匹配所有被引号包裹的文本片段，给片段外层包裹对应样式标签后再输出。

具体操作步骤 #

• 首先在当前cshtml文件顶部引入正则依赖：
  @using System.Text.RegularExpressions;
• 在cshtml的代码块中定义格式化处理的局部方法，用来自动识别并包裹引号内的文本：

@functions {
    // 正则匹配所有成对双引号包裹的内容，RegexOptions.Compiled 可以提升重复调用时的性能
    private static readonly Regex QuotedTextRegex = new Regex(@"""[^""]+""", RegexOptions.Compiled);
    
    private IHtmlContent RenderWithBoldQuotedText(string rawContent)
    {
        if (string.IsNullOrWhiteSpace(rawContent))
        {
            return HtmlString.Empty;
        }
        // 将匹配到的引号内容包裹加粗标签
        var formattedContent = QuotedTextRegex.Replace(rawContent, match => $"<strong>{match.Value}</strong>");
        return Html.Raw(formattedContent);
    }
}

如果你的文本里引号是转义格式的"，只需要把正则替换为@""[^&]+""即可正常匹配。

• 修改你原有循环中的输出逻辑，把直接输出@Html.Raw(item)的部分替换为调用上面写好的格式化方法，顺便修正原有代码里的变量名笔误（firsLine改为firstLine）：

@foreach (var error in Model.Errors)
{
    var errors = error.Split(Environment.NewLine);
    bool firstLine = true;

    foreach (var item in errors)
    {
        if (firstLine)
        {
            <p class="leading-8 text-red-500 font-spec-bold">
                @RenderWithBoldQuotedText(item)
            </p>
            firstLine = false;
        }
        else
        {
            <p id="teste" class="leading-8 main-text-color">
                @RenderWithBoldQuotedText(item)
            </p>
        }
    }
}

效果说明 #

• 传入原始文本：I need this "WORD" in bold.
• 最终渲染DOM结构：I need this <strong>"WORD"</strong> in bold.，完全符合预期，仅引号包裹的文本会应用加粗效果，其余文本原有样式不受任何影响。

如果需要自定义引号内容的样式（比如修改颜色、加背景），只需要把替换逻辑里的<strong>标签换成带自定义class的span即可，例如替换为<span class="font-bold text-red-500">{match.Value}</span>就可以实现自定义样式效果。

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