Razor注入正则表达式引发JavaScript语法错误问题排查求助

• 核心原因是你的输出内容中出现了*.NET 正则替换元字符序列$'*：你输出的正则末尾是$，后面紧跟包裹字符串的单引号，构成了特殊序列$'。如果你的站点配置了全局HTML输出过滤器（比如XSS防护、模板内容替换、静态资源路径替换类的中间件/过滤器），这类过滤器通常会用正则处理最终输出的HTML内容，而$'在.NET的正则替换规则中属于预定义元字符，代表「匹配项位置右侧的所有文本」，所以就被自动替换为了当前位置后面的</div>标签，最终导致JS语法错误。
• 你当前直接用@Html.Raw输出内容到JavaScript字符串，没有做JS字符串编码，也是触发该问题的诱因之一。

以下方案任选其一即可：

• 改用JS正则字面量替代字符串构造正则，避免$和单引号相邻，修改Razor代码如下：

<script>
    app.run(function () {
        var key = $('#@Model.HtmlId');
        key.inputFilter(function (value) {
            // 直接输出正则字面量，注意转义正则内的斜杠
            return /@Html.Raw(RegularExpressions.KeyPattern.Replace("/", "\\/"))/.test(value);
        });
    });
</script>

• 输出正则内容时做JS字符串编码，避免特殊字符被服务器端过滤器识别：

@using System.Web
<script>
    app.run(function () {
        var key = $('#@Model.HtmlId');
        key.inputFilter(function (value) {
            return new RegExp(@HttpUtility.JavaScriptStringEncode(RegularExpressions.KeyPattern)).test(value);
        });
    });
</script>

• 将包含正则的这段JS代码迁移到独立的.js文件中，服务器端的HTML过滤器不会处理静态JS文件内容，自然不会出现该问题。
• 如果必须保留现有写法，可以在输出时转义$字符，破坏$'的特殊序列：

<script>
    app.run(function () {
        var key = $('#@Model.HtmlId');
        key.inputFilter(function (value) {
            return new RegExp('@Html.Raw(RegularExpressions.KeyPattern.Replace("$", "\\$"))').test(value);
        });
    });
</script>

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