AngularJS create html/link/anchor from text (escape/unescape html in view)
I think you can use Angular's linky filter for this: https://docs.angularjs.org/api/ngSanitize/filter/linky
You can use it like so:
<p ng-bind-html="post | linky"></p>
You'll have to include Angular's sanitize module for linky to work:
angular.module('myApp', [ 'ngRoute', 'ngSanitize', 'myApp.filters', ...
You can use this replace for the string:
'please visit http://stackoverflow.com quickly'.replace(/(http[^\s]+)/, '<a href="$1">$1</a>')
then you'll need to use the $sce
service, and ngBindHtml
directive.
$sce
is a service that provides Strict Contextual Escaping services to AngularJS.
So in your filter you need to wrap links with a
tags then return a trusted html using $sce.trustAsHtml
:
filter('createAnchors', function ($sce) { return function (str) { return $sce.trustAsHtml(str. replace(/</g, '<'). replace(/>/g, '>'). replace(/(http[^\s]+)/g, '<a href="$1">$1</a>') ); }})
Working examples: http://jsfiddle.net/T3fFt/11/