Question

在我的网站中，有一个功能，用户可以在其中插入自定义标签，如下所示：

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

而且我必须在AngularJS网站中显示它，并使其显示如下：

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

当前我正在使用ng-bind-html来显示它们插入的标签，但是由于在Webist中还应用了其他样式，例如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);

创建一个自定义过滤器以更改标签AngularJS的属性

1 个答案: