代码之家 › 专栏 › 技术社区 › Pietro Nadalini

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

regex angularjs javascript

Pietro Nadalini · 技术社区 · 7 年前

在my webiste中,有一个功能,用户可以插入如下自定义标记:

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

我必须在我的AngularJS网站上展示它,让它像这样展示:

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

目前我正在使用 ng-bind-html 显示他们插入的标记,但由于webiste中应用了其他样式 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>

1 回复 | 直到 7 年前

The fourth bird 7 年前

您不必使用exec,您可以使用一个捕获组来匹配regex中的颜色,并在替换中使用 $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);

推荐文章

DotFX · RegEx捕获关键字前但括号后的所有内容

1 年前

user66001 · 正则表达式用于匹配有引号和无引号的文本,并且不匹配任何部分

1 年前

perlchamp · 为什么这也匹配?

1 年前

con · Negative Lookaward在perl正则表达式中不起作用

1 年前

Andrus · 如何在sql中查找第二个匹配项

1 年前

iato · 确保正则表达式不从命名材料中的数字中提取

1 年前

vr8ce · 非成对标记中特定字符的正则表达式

1 年前

MARTIN · 交换第一个和最后一个单词,反转所有中间的字符

1 年前

Carsten · 使用最近的搜索模式更改文本块

1 年前

Eric Marceau · Grep:有没有一种特殊的方法可以将“无字符”作为“字符位置”匹配的置换?

1 年前