Question

回复类型：

 1. "FieldValue" : "java is platform independent language"
 2. "FieldValue" : "<div>java is platform indepnedant language</div>"
 3. "FieldValue" : "https://www.oracle.com/index.html"
 4. "FieldValue" : "<div>https://www.oracle.com/index.html </div>"
 5. "FieldValue" : "<div> java is platform independent language for more info please visit https://www.oracle.com/index.html </div>"

--- Angular Code ---

<div *ngIf='isLink;else other_content'>
  <a [innerHtml]="news.FieldValue" target="_blank ">{{news.FieldValue}}</a>
</div>
<ng-template #other_content>
  <div [innerHtml]="news.FieldValue">{{news.FieldValue}}> </div>
</ng-template>

--- javascript函数检查URL ---

if(new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?").test(news['FieldValue']))
{
      this.isLink = true;      
}

我想如果FieldValue是链接或URL，那么它是可点击的并在新标签中打开链接，如果FieldValue是计划文本/ HTML，则显示在普通的div标签中。我使用RegEx查找FieldValue是否包含URL，但是对于4和5响应类型它不起作用。

Answer 1

很难为复杂的字符串编写正则表达式，因此首先要简化它。在你的情况4或5中，你可以像下面这样一步一步地做：

删除html标记
修剪字符串
使用简单的正则表达式来检查它是否是URL。

Answer 2

如果ng-show位于超链接标记内，则需要添加islink;如果是容器内的链接，则需要ng-hide：

<a ng-href="value" ng-show="islink" >{{value}}</a>
<div ng-hide='islink' [innerHtml]="value">{{value}} </div>

请参阅this plunk

Answer 3

使用

解决

createTextLinks_(text) {
    var container = document.createElement("p");
    container.innerHTML = text;
    var anchors = container.getElementsByTagName("a");
    if(anchors.length>0){
          return text;
    }
    else{
    var plain_text = this.htmlToPlaintext(text);
    return (plain_text || "").replace(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi,
      function(match, space, url){
        var hyperlink = url;
        if (!hyperlink.match('^https?:\/\/')) {
          hyperlink = 'http://' + hyperlink;
        }
        return space + '<a href="' + hyperlink + '">' + url + '</a>';
      }
    );
  } 
  };

感谢所有人的回答:)

如何处理Rest API响应可能是任何值，因为值可能包含纯文本，HTML，Url，Hyperlink In Angular 2

3 个答案: