正则表达式在指令html标签更换 [英] Regex replace with html tags in directive

问题描述

我使用的角度JS来获取和 NG-重复在Twitter的鸣叫。我需要强调的鸣叫字符串的部分，如 @tag 和 #hash ，所以有人建议我用替换补充围绕我想强调的事情DOM包装。

问题是，因为我不能直接输出到DOM，而是 NG-重复在一个范围变量，HTML标签似乎没有被加入到字符串

问：我怎样​​才能html标签附加到一个JS字符串

---

指令片断：

  scope.getTweets =功能（）{
    ModulesService.getTweets（）。成功（功能（RES）{
        如果（RES和放大器;＆安培; Array.isArray（RES））{
            scope.tweets = parseTweets（RES）;
        }
    }）;
};
scope.getTweets（）;
VAR parseTweets =功能（微博）{
    tweets.forEach（功能（鸣叫）{
        tweet.text.replace（/（@ [^] +）/克，'＆所述;类别=用户＆GT; $ 1所述; / A＆GT;'）。
        取代（/（＃[^] +）/克，'＆LT;跨度类=散列＆GT; $ 1 LT; / SPAN＆GT;'）。
        取代（/（HTTPS：\\ / \\ / [^] +）/克，'＆LT; A HREF =$ 1＆GT; $ 1 LT; / A＆GT;'）;
        的console.log（'鸣叫！'，tweet.text）; //不包含HTML改变
    }）;
    返回鸣叫;
};
 

HTML

 ＆LT; D​​IV NG重复=鸣叫鸣叫中的阶级=人体后clearfix＆GT;
    {{tweet.text}}
＆LT; / DIV＆GT;
 

解决方案

使用过滤器像这样

  filterExample.filter（'FILTERNAME'，函数（）{
    复位功能（文本）{
    变种海峡= text.replace（/（@ [^] +）/克，'＆所述;类别=用户＆GT; $ 1所述; / A＆GT;'）。
    取代（/（＃[^] +）/克，'＆LT;跨度类=散列＆GT; $ 1 LT; / SPAN＆GT;'）。
    取代（/（HTTPS：\\ / \\ / [^] +）/克，'＆LT; A HREF =$ 1＆GT; $ 1 LT; / A＆GT;'）;
        返回str.toLowerCase（）;
    };
 }）
 

和在HTML

 ＆LT; D​​IV NG重复=鸣叫鸣叫中的阶级=人体后clearfix＆GT;
      ＆LT;跨度NG绑定-HTML =tweet.text | FILTERNAME＆GT;＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
 

I am using Angular JS to get and ng-repeat over Twitter tweets. I needed to highlight parts of the tweet string, like @tag and #hash, so it was suggested I use replace to add DOM wrappers around the things I want to highlight.

The issue is, since I'm not directly outputting to the DOM, and instead ng-repeating over a scope variable, the html tags don't seem to be added to the strings.

Question: How can I append html tags to a JS string?

---

Directive snippet:

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>

解决方案

use filter like this

  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();
    };
 })

and in html

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

这篇关于正则表达式在指令html标签更换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！