javascript - Angularjs directive to replace text

Question

How would I create a directive in angularjs that for example takes this element:

<div>Example text http://example.com</div>

And convert it in to this

<div>Example text <a href="http://example.com">http://example.com</a></div>

I already have the functionality written to auto link the text in a function and return the html (let's call the function "autoLink" ) but i'm not up to scratch on my directives.

I would also like to add a attribute to the element to pass a object in to the directive. e.g.

<div linkprops="link.props" >Example text http://example.com</div>

Where link.props is object like {a: 'bla bla', b: 'waa waa'} which is to be passed to the autoLink function as a second param (the first been the text).

Answer 1

Two ways of doing it:

Directive

app.directive('parseUrl', function () {
    var urlPattern = /(http|ftp|https)://[w-]+(.[w-]+)+([w.,@?^=%&:/~+#-]*[w@?^=%&/~+#-])?/gi;
    return {
        restrict: 'A',
        require: 'ngModel',
        replace: true,
        scope: {
            props: '=parseUrl',
            ngModel: '=ngModel'
        },
        link: function compile(scope, element, attrs, controller) {
            scope.$watch('ngModel', function (value) {
                var html = value.replace(urlPattern, '<a target="' + scope.props.target + '" href="$&">$&</a>') + " | " + scope.props.otherProp;
                element.html(html);
            });
        }
    };
});

HTML:

<p parse-url="props" ng-model="text"></p>

Filter

app.filter('parseUrlFilter', function () {
    var urlPattern = /(http|ftp|https)://[w-]+(.[w-]+)+([w.,@?^=%&:/~+#-]*[w@?^=%&/~+#-])?/gi;
    return function (text, target, otherProp) {
        return text.replace(urlPattern, '<a target="' + target + '" href="$&">$&</a>') + " | " + otherProp;
    };
});

HTML:

<p ng-bind-html-unsafe="text | parseUrlFilter:'_blank':'otherProperty'"></p>

Note: The 'otherProperty' is just for example, in case you want to pass more properties into the filter.

jsFiddle

Update: Improved replacing algorithm.