时间戳

首页 > 解决方案 > 创建自定义过滤器以更改标记 AngularJS 的属性

javascript - 创建自定义过滤器以更改标记 AngularJS 的属性

问题描述

在我的网站中有一个功能，用户可以插入这样的自定义标签：

<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>

标签： javascriptangularjsregex

解决方案

您不必使用 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);

推荐阅读