Создайте пользовательский фильтр для изменения атрибутов тега AngularJS

Question

В моем веб-сайте есть функция, где пользователь может вставить пользовательский тег, подобный этому:

<font color="#5780CD">Blueish</font>

И я должен показать это на своем сайте AngularJS и заставить его отображаться так:

<font style="color: #5780CD !important">Blueish</font>

В настоящее время я использую ng-bind-html, чтобы показать тег, который они вставили, но поскольку в веб-сайте применяются другие стили, например important, я должен поставить !important во встроенном стиле.

Я создал собственный фильтр, подобный следующему:

angular.
module('SelectPayment').
  filter('specialColor', function($sce) {
    return function(input) {
      var theColor = /"#[0-9a-f]{3,6}"/.exec(input)[0].replace('"', '');
      var output = input.replace(/color="#[0-9a-f]{3,6}"/.exec(input)[0], 'style=\"color: ' + theColor + ' !important\"');
      return $sce.trustAsHtml(output);
    };
});

И в моем представлении HTML у меня есть это:

<p ng-bind-html="vm.CustomDescription | specialColor"></p>

Но это не работает, и я думаю, что мои регулярные выражения не могут быть оптимальным способом сделать это. В настоящее время я получаю следующий результат:

<font style="color: #5780CD" !important"="">Blueish</font>

Answer 1

Вам не нужно использовать exec, вы можете использовать группу захвата, чтобы соответствовать цвету в вашем регулярном выражении, и при замене обратиться к этой группе, используя $1. Используйте /i для совпадения без учета регистра.

color="(#[0-9a-f]{3,6})"

Если коды могут содержать только 3 или 6 символов, вы можете использовать регулярное выражение, используя чередование в группе захвата:

color="#([a-f0-9]{6}|[a-f0-9]{3})"

let str = '<font color="#5780CD">Blueish</font>';
let output = str.replace(/color="(#[0-9a-f]{3,6})"/i, 'style="color: $1 !important"');
console.log(output);