如何在AngularJS 1.8.3中转义插值标记{{和}}避免执行

问题背景 #

需要转义字符串中的{{和}}标记，避免被AngularJS 1.8.3当作插值表达式解析，同时要求最终HTML输出与原输入一致（不带反斜杠）。尝试过以下代码：

var inputString = "{{ code snippet here }}" ; 
inputString = inputString.replace("{{", "\\{\\{").replace("}}","\\}\\}");

但输出渲染为：

\{\{ code snippet here \}\}

且因项目限制无法使用ngNonBindable指令。

解决方案 #

根据元素类型不同，采用两种转义方式：

1. 普通HTML元素（如div、p） #

AngularJS 1.x原生支持用单个反斜杠转义插值标记（\{{}}），渲染后会自动去除反斜杠显示原始{{}}。在JS字符串中需将反斜杠转义为双反斜杠，同时使用全局正则替换确保处理所有匹配项，最后通过innerHTML设置内容让Angular处理转义逻辑：

var nodeValue = "{{ 'sample snippet' }}";
// 全局替换为Angular可识别的转义格式
nodeValue = nodeValue.replace(/{{/g, "\\{{").replace(/}}/g, "\\}}");
// 用innerHTML让Angular解析转义标记
document.getElementById('testdiv').innerHTML = nodeValue;

对应的HTML结构：

<div ng-app>
  <div id="testdiv"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
</div>

2. Textarea元素 #

Textarea内容为纯文本，Angular不会自动解析转义标记，此时使用HTML字符实体替换大括号：

• 左大括号{对应实体{
• 右大括号}对应实体}

替换后通过innerHTML设置内容，浏览器会自动将实体解析为原始大括号，同时Angular不会识别为插值标记：

var nodeValue = "{{ 'sample snippet' }}";
// 用HTML实体替换插值标记
nodeValue = nodeValue.replace(/{{/g, "{{").replace(/}}/g, "}}");
// 用innerHTML解析实体
document.getElementById('testtextarea').innerHTML = nodeValue;

对应的HTML结构：

<div ng-app>
  <textarea id="testtextarea" cols="50"></textarea>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
</div>

关键说明 #

• 使用全局正则表达式（/{{/g、/}}/g）替换所有出现的插值标记，避免仅替换第一个匹配项。
• 普通元素依赖Angular的转义逻辑，需用innerHTML而非innerText设置内容；textarea依赖浏览器的实体解析，同样需用innerHTML。

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