AngularJS中使用trustAsHtml渲染搜索高亮文本失效问题

你已经搞定了搜索文本的替换逻辑，甚至用$sce.trustAsHtml标记了安全HTML，但页面还是直接输出<span class="highlighted">$1</span>这类标签，核心问题出在模板的渲染方式上。

问题根源 #

AngularJS里用{{}}插值的内容会被自动转义HTML（这是默认的XSS防护机制）。哪怕你已经通过$sce.trustAsHtml把内容标记为安全，只要用插值语法，Angular还是会把HTML标签当成普通文本输出。

解决方案 #

两步就能解决问题：

1. 修改模板，用ng-bind-html替代插值语法

把模板中显示name和publicKey的插值代码，换成ng-bind-html指令。比如：

原来的模板片段（假设是这样）：

<div ng-repeat="(key, apiKey) in listCtrl.List | filter:listCtrl.searchText track by apiKey.id" id="apiKey{{key}}">
  <p>{{apiKey.name}}</p>
  <p>{{apiKey.publicKey}}</p>
</div>

修改后：

<div ng-repeat="(key, apiKey) in listCtrl.List | filter:listCtrl.searchText track by apiKey.id" id="apiKey{{key}}">
  <p ng-bind-html="apiKey.name"></p>
  <p ng-bind-html="apiKey.publicKey"></p>
</div>

2. 确保控制器正确注入$sce

检查控制器定义，确认$sce已经作为依赖注入，否则$sce.trustAsHtml会抛出错误。示例：

angular.module('yourAppModule').controller('ListController', ['$sce', function($sce) {
  const listCtrl = this;
  
  // 其他控制器代码...

  listCtrl.searchHighlight = function() {
    const fields = ['name', 'publicKey'];
    const copy = [...listCtrl.List];
    copy.forEach((item, key) => {
      Object.keys(item).forEach(field => {
        if (fields.includes(field)) {
          copy[key][field] = $sce.trustAsHtml(listCtrl.searchText ? item[field].toString()
            .replace(new RegExp(`(${listCtrl.searchText})`, 'i'), '<span class="highlighted">$1</span>')
            : item[field].toString());
        }
      });
    });
    listCtrl.List = copy;
  };
}]);

额外优化小建议 #

• 给搜索文本做正则转义：如果用户输入.、*这类正则特殊字符，会导致替换逻辑出错，建议用转义函数处理，比如：

  // 简单实现正则转义
  function escapeRegExp(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
  // 替换时使用
  const regex = listCtrl.searchText ? new RegExp(`(${escapeRegExp(listCtrl.searchText)})`, 'i') : null;
  

• 避免重复拷贝数组：可以只修改需要高亮的字段，不用每次都深拷贝整个列表，提升性能。

这样修改后，页面就能正确渲染带highlighted类的高亮文本，不再显示原始HTML标签了。

内容的提问来源于stack exchange，提问作者Евгения