Угловая: создать форматирующий фильтр без html-экранирования

Question

Я хочу сделать автоматическое форматирование HTML для некоторых строк. Например, я хочу сделать автоматическую подписку для символа с префиксом подчеркивания.
Таким образом, строка типа "U_1 + U_2 = U_3" должна быть отформатирована в U₁ + U₂ = U₃

Это похоже на идеальную работу для фильтра. Я попробовал следующее:

angular.module('myApp.filters', []).
  filter('convert_subscripts', [ function(){
      return function(text){
          return text.replace(/_([\w]+)/, '<sub>$1</sub>', 'g');
      };
   }])

И на мой взгляд:

<p>{{content.text | convert_subscripts }}</p>

Но это ускользает от HTML, поэтому пользователь видит теги "sub" вместо красиво отформатированного индекса.

Как мне реализовать функцию форматирования, чтобы html-теги не экранировались?

(Чтобы быть идеальным, сам контент.текст должен быть экранирован для безопасности, но добавленные теги подписки - нет. Я использую угловой 1.2)

Answer 1

Я думаю, что эта статья должна помочь. Вы можете визуализировать HTML двумя способами

$sce.trustAsHtml('text')

или вы можете создать фильтр для этой цели, как

app.filter('filterName',function($sce){
    return function(text){
             $sce.trustAsHtml(text);
           }
    });

В вашем случае вы должны использовать подход 1

function($sce){
      return function(text){
          return $sce.trustAsHtml(text.replace(/_([\w]+)/, '<sub>$1</sub>', 'g'));
      };