Convert generic text string in json object into valid url using Angular

Question

This is my first Stack Overflow question so bear with me (I almost always find what I need or figure it out myself but this time is different since I'm just getting my feet wet with Angular).

I have a directive the grabs the name and url from a json object and builds the html with the name and an href. The problem is, the json response from the url object is a regular text string entered by a user from a CMS and and it's currently not being validated on the backend. Therefore, the URL can look like www.blah.xxx or http://blah.xxx and so on. Is there an Angular way without using a plugin where I can tell the output to check that the url has http:// and if it doesn't then add it? Or is there a good plugin that will do the trick easily?

angular.module('pwrApp')
    .directive("getPrimaryCareProviderName", [function() {
        return {
            restrict: "A",
            link: function(scope, elem, attrs) {

            scope.$watch('primaryCareProvider', function() {
              var output = "";

                if(scope.primaryCareProvider.site == "" || scope.primaryCareProvider.site ===null){
                    output = scope.primaryCareProvider.name;
                }else{
                    output = '<a href="'+scope.primaryCareProvider.url+'" target="_BLANK">'+scope.primaryCareProvider.name+"</a>";
                }

                elem.html(output);
            });
        }
    }
}]);

Check this regex out. You can test for this regex, and add "http://" if you need to. IMO there's no need to import a plugin (and the overhead) for this. — UtsavShah
– UtsavShah, Commented Dec 18, 2015 at 2:04
$compile(output); Have a look at the docs: docs.angularjs.org/api/ng/service/$compile — Leo Farmer
– Leo Farmer, Commented Dec 18, 2015 at 2:21
I think you would be relatively safe just checking for the existence of :// in the url using indexOf(). — Matt Way
– Matt Way, Commented Dec 18, 2015 at 2:45

Dhia · Accepted Answer · 2015-12-18 03:02:44Z

1

You can simply check every time if it's contains already the http in the beginning of the url:

 if(scope.primaryCareProvider.site == "" || scope.primaryCareProvider.site ===null){
           output = scope.primaryCareProvider.name;
     }
     else{
           var url = scope.primaryCareProvider.url
           if (url.indexOf("http://") != 0){
              url = "http://" + url;
           }
           output = '<a href="'+url+'" target="_BLANK">'
                    +scope.primaryCareProvider.name+'</a>';
     }

But if you want a more sophisticated way, check this snippet

answered Dec 18, 2015 at 3:02

Dhia

10.7k11 gold badges62 silver badges70 bronze badges

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

1 Comment

thinkbliss Over a year ago

Yes this did solve my problem. Thank you very much. I made a quick edit to be more universal because the problem ended up being sitewide and not just within that directive.

Collectives™ on Stack Overflow

Convert generic text string in json object into valid url using Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related