Question

我的角度绑定如下：

<p ng-bind="user.content"></p>

并输出如下文所示的字符串

@lorem ipsum dolor set amet

我希望它能够在html中打印，并在下一个连续的单词ipsum中为用户名@lorem添加span。因此生成的html应该变成：

<span>@lorem ipsum</span> dolor set amet

我搜索了网页，但发现只有一些解决方案只能使用普通的javascript而不是下一个连续的单词来高亮显示用户名。谢谢你的帮助。

Answer 1

不幸的是，正则表达式仅适用于选择器。 here所以你必须将用户名与文本的其余部分分开。

通常，文字已使用span或pre标记与用户名一起保存。

e.g：

"Text text from <pre>@username</pre>."

您还可以创建一个指令：您可以在哪里搜索模式：

/^@[a-z0-9_-]{3,16}$/

angular.module('app').directive('addSpan', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.html
           return element.innerHTML.replace(/^@[a-z0-9_-]{3,16}$/,"<span class='username'>$0</span>");
        }
    };
});

Answer 2

尝试以下方法：

$('p').html(
    $('p')
        .html()
        .replace(/^([^\s]+)\s([^\s]+)/, "<span>$1 $2</span>")
);

AngularJS用连续的单词突出显示用户名

2 个答案: