AngularJS：如何在textarea的ng-model中转义HTML？

这个问题我之前在做AngularJS项目的时候也碰到过，双向绑定+HTML转义确实容易踩坑，尤其是要避免显示&这种转义实体，同时还要保证输入的HTML安全。给你两个靠谱的实现方案，优先推荐第一个：

1. 自定义双向绑定指令（推荐，模块化且优雅） #

因为ng-bind-html是单向绑定，满足不了你的需求，所以我们可以给ng-model添加自定义的解析器（Parser）和格式化器（Formatter），分别处理「视图→模型」和「模型→视图」的转义/反转逻辑。

步骤1：引入并依赖ngSanitize（可选，看需求） #

如果你需要过滤不安全的HTML标签（比如<script>），先确保项目里引入了angular-sanitize.js，然后在模块里注入它：

angular.module('yourApp', ['ngSanitize']);

步骤2：创建自定义指令 #

这个指令会自动处理双向绑定的转义逻辑：

angular.module('yourApp').directive('htmlSafeModel', ['$sanitize', function($sanitize) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 【模型→视图】：把转义后的实体（如&）还原成正常字符（&）
      ngModel.$formatters.push(function(value) {
        if (!value) return '';
        // 用临时DOM元素解码HTML实体
        const tempEl = document.createElement('div');
        tempEl.innerHTML = value;
        return tempEl.textContent || tempEl.innerText || '';
      });

      // 【视图→模型】：把用户输入的内容转义成安全的HTML实体
      ngModel.$parsers.push(function(value) {
        if (!value) return '';
        
        // 选择1：完全转义所有HTML标签（包括<b>这类），适合严格禁止HTML的场景
        function escapeAllHtml(str) {
          return str.replace(/[&<>"']/g, match => {
            const escapeMap = {
              '&': '&amp;',
              '<': '&lt;',
              '>': '&gt;',
              '"': '&quot;',
              "'": '&#039;'
            };
            return escapeMap[match];
          });
        }
        return escapeAllHtml(value);

        // 选择2：只移除不安全的HTML标签，保留<b><i>等安全标签（需要依赖ngSanitize）
        // return $sanitize(value);
      });
    }
  };
}]);

步骤3：在textarea上使用指令 #

直接给你的textarea加上自定义指令即可：

<textarea id="user_about" maxlength="500" name="about" ng-model="foo.bar" html-safe-model></textarea>

这样一来：

• 当后端返回转义后的内容（比如<b>Hi & there</b>），textarea会显示成<b>Hi & there</b>，不会出现&；
• 用户输入<i>Test & demo</i>时，模型里会自动转义成<i>Test & demo</i>，既保证了HTML安全，又不会破坏正常字符的显示。

2. 过滤器+监听变量（适合简单场景） #

如果你的需求比较简单，不想写指令，也可以用过滤器+变量监听的方式：

步骤1：创建编码/解码过滤器 #

// 解码HTML实体（模型→视图）
angular.module('yourApp').filter('decodeHtml', function() {
  return function(input) {
    if (!input) return '';
    const tempEl = document.createElement('div');
    tempEl.innerHTML = input;
    return tempEl.textContent || tempEl.innerText;
  };
});

// 编码HTML实体（视图→模型）
angular.module('yourApp').filter('encodeHtml', function() {
  return function(input) {
    if (!input) return '';
    return input.replace(/[&<>"']/g, match => {
      const escapeMap = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
      };
      return escapeMap[match];
    });
  };
});

步骤2：在控制器里处理双向同步 #

angular.module('yourApp').controller('YourController', ['$scope', '$filter', function($scope, $filter) {
  // 假设foo.bar是从后端获取的转义内容
  $scope.foo.barDecoded = $filter('decodeHtml')($scope.foo.bar);

  // 监听解码后的变量，同步到原模型
  $scope.$watch('foo.barDecoded', function(newVal) {
    if (newVal) {
      $scope.foo.bar = $filter('encodeHtml')(newVal);
    }
  });
}]);

步骤3：绑定textarea到解码后的变量 #

<textarea id="user_about" maxlength="500" name="about" ng-model="foo.barDecoded"></textarea>

这种方式代码更直观，但不如指令模块化，适合小型项目或简单场景。

注意事项 #

• 如果选择用$sanitize，一定要确保引入了对应的脚本文件，并且模块依赖正确；
• 测试时记得输入特殊字符（比如&、<script>、<b>），验证显示和模型存储的内容是否符合预期；
• 如果你不需要过滤HTML标签，只是想避免&显示，只保留解码逻辑即可，但建议还是加上转义保证安全性。

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