Question

我正在使用Angular JS获取和ng-repeat Twitter推文。我需要突出显示部分推文字符串，例如@tag和#hash，因此建议我使用replace在我想要突出显示的内容周围添加DOM包装。

问题是，因为我没有直接输出到DOM，而是ng-repeating而不是范围变量，所以html标签似乎没有添加到字符串中。

问题：如何将html标签附加到JS字符串？

指令片段：

scope.getTweets = function () {
    ModulesService.getTweets().success(function (res) {
        if (res && Array.isArray(res)) {
            scope.tweets = parseTweets(res);
        }
    });
};
scope.getTweets();
var parseTweets = function (tweets) {
    tweets.forEach(function (tweet) {
        tweet.text.replace(/(@[^ ]+)/g, '<a class="user">$1</a>').
        replace(/(#[^ ]+)/g, '<span class="hash">$1</span>').
        replace(/(https?:\/\/[^ ]+)/g, '<a href="$1">$1</a>');
        console.log('tweet!', tweet.text); //does not contain altered HTML
    });
    return tweets;
};

HTML：

<div ng-repeat="tweet in tweets" class="post-body clearfix">
    {{tweet.text}}
</div>

Answer 1

首先，replace方法不会更改字符串，但会返回带有替换的新字符串。将您的代码更改为：

tweet.text = tweet.text.replace(...).replace(...)...;

其次{{tweet.text}}被html转义文本取代。将其更改为：

<span ng-bind-html="tweet.text"></span>

Answer 2

使用像这样的过滤器

  filterExample.filter('filterName', function () {
    return function (text) {
    var str = text.replace(/(@[^ ]+)/g, '<a class="user">$1</a>').
    replace(/(#[^ ]+)/g, '<span class="hash">$1</span>').
    replace(/(https?:\/\/[^ ]+)/g, '<a href="$1">$1</a>');
        return str.toLowerCase();
    };
 })

和html

  <div ng-repeat="tweet in tweets" class="post-body clearfix">
      <span ng-bind-html="tweet.text | filterName"></span>
    </div>

Answer 3

您是否尝试过ng-bind-html？

{{1}}

正则表达式替换为指令

3 个答案: