angularjs to output html clickable element instead of html as a string

Question

I am using a filter to convert any URL or email id from a piece of content. but its getting rendered as a string not as a clickable HTML element.

Filter JS

angular.module('myApp.filters', []).filter('parseUrl', function() {
    var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim
    var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim

    return function(text) {

        if (text.match(urls)) {
            text = text.replace(urls, "<a href=\"$1\" target=\"_blank\">$1</a>")
        }
        if (text.match(emails)) {
            text = text.replace(emails, "<a href=\"mailto:$1\">$1</a>")
        }

        return text
    }
});

this above code output me with a plane text and not clickable HTML elements.

Fiddle

Please check updates. into my question. I have added a fiddle. — Nilesh Mahajan
– Nilesh Mahajan, Commented Aug 18, 2015 at 9:40
It's better to use test than match when you just want to check if a pattern exists in a string — Tushar
– Tushar, Commented Sep 20, 2015 at 5:11

Prasanna · Accepted Answer · 2015-08-18 10:00:12Z

2

I have updated JS Fidle

HTML: Added

ng-bind-html

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
         <h1 ng-bind-html="test | parseUrl">{{test}}</h1>
    </div>
</div>

Documentation ngBindHtml

answered Aug 18, 2015 at 10:00

Prasanna

7795 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Vranckx · Accepted Answer · 2015-08-18 11:03:18Z

1

Your filter should make use of the Strict Contextual Escaping $sce to return trusted HTML

angular.module('myApp.filters', []).filter('parseUrl', function ($sce) {
     var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim
     var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim

     return function (text) {
         if (text.match(urls)) {
             text = text.replace(urls, "<a ng-href=\"$1\" target=\"_blank\">$1</a>");
         }

         if (text.match(emails)) {
             text = text.replace(emails, "<a ng-href=\"mailto:$1\">$1</a>");
         }

         return $sce.trustAsHtml(text);
     }
 });

Update

It seems your are using an older version of Angular (version 1.0.2) which doesn't have the Strict Contextual Escaping $sce. That explains your usage of ngSanitize module.

Your filter code is correct, but you should bind your text differently using the ng-bind-html.

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
         <h1 ng-bind-html="test | parseUrl"></h1>
    </div>
</div>

JsFiddle : http://jsfiddle.net/fb4meygo/1/

edited Aug 18, 2015 at 11:03

answered Aug 18, 2015 at 9:12

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

1 Comment

Nilesh Mahajan Over a year ago

check my question, I have added fiddle to my question. I tried your solution on local. but no luck....

Rubi saini · Accepted Answer · 2015-09-30 11:25:01Z

0

With the help of linky filter we can detect links from text and show them differently. Linky takes text and produces HTML by wrapping all URLs into anchor tags. It supports email address, http, https, and mailto.

HTML:

<div ng-app="myApp" ng-controller="myController">
    <div>
        <p ng-bind-html="myText | linky :'_blank'"></p>
        <textarea ng-model="myText" style="width: 420px; height: 120px"></textarea>
    </div>
</div>

Controller:

var myApp = angular.module('myApp', ['ngSanitize'])
.controller('myController', ['$scope', function ($scope) {
    $scope.myText = "Some default text is here http:/tothenew.com/";
}]);

answered Sep 30, 2015 at 11:25

Rubi saini

2,53525 silver badges21 bronze badges

Collectives™ on Stack Overflow

angularjs to output html clickable element instead of html as a string

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related