Clever Geek Handbook

How to show URL provider name from regex

I have a requirement like this,

http://indianexpress.com/article/india/ram-nath-kovind-for-president-which-parties-support-his-candidature-and-how-the-scales-weigh-4712714/

now i show whole link, now the requirement is to show only indianexpress (when i click on this link it should navigate)

code:

     var detectUrls = function(value) {
          var retval = value;
          if(retval != null) {
            var urlRegex = /(((\b(https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:(),.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
            retval = value.replace(urlRegex, function (url,b,c) {
              var url2 = (c == 'www.') ?  'http://' +url : url;
              return '<a href="' + url2 + '" target="_blank">' + url2 + '</a>';
            });
          }
          return retval;
        };
$scope.post.postText = detectUrls($scope.post.postText);

I am showing the whole link using url2 (above)

+3


source to share


1 answer


I propose to rearrange the regexp parts to only have two matching capture groups, one for the protocol and the other for the domain name with any sub-regions. Template

  • ((?:\b(?:https?|ftp|file):\/\/)|www\.)

    - Group 1 ( b

    ):
    • (?:\b(?:https?|ftp|file):\/\/)

      - a string of words followed by http

      either https

      , ftp

      or file

      , followed by://

    • |

      - or
    • www\.

      - www.

      substring
  • ([^\s\/]+)

    - Group 2 ( c

    ): 1+ characters other than spaces, and/

  • (?:\/?[-A-Z0-9+&@#\/%?=~_|!:(),.;]*[-A-Z0-9+&@#\/%=~_|])?

    - optional sequence:
  • \/?

    - 1 or 0 /

    s
  • [-A-Z0-9+&@#\/%?=~_|!:(),.;]*

    - 0 or more characters defined in the character class
  • [-A-Z0-9+&@#\/%=~_|]

    - 1 single char from a specific class.

Then the code will look like

var detectUrls = function(value) {
      var retval = value;
      if(retval != null) {
        var urlRegex = /((?:\b(?:https?|ftp|file):\/\/)|www\.)([^\s\/]+)(?:\/?[-A-Z0-9+&@#\/%?=~_|!:(),.;]*[-A-Z0-9+&@#\/%=~_|])?/ig;
        retval = value.replace(urlRegex, function (url,b,c) {
          var url2 = (b == 'www.') ?  'http://' +url : url;
          return '<a href="' + url2 + '" target="_blank">' + c + '</a>';
        });
      }
      return retval;
    };
    
var res  = detectUrls('http://indianexpress.com/article/india/ram-nath-kovind-for-president-which-parties-support-his-candidature-and-how-the-scales-weigh-4712714/  www.google.com');
console.log(res);
document.body.innerHTML = res;
Run codeHide result




To only display names you need to tweak the regex a bit, ([^\s\/]+)

change to (?:[^\s\/]*\.)?([^\s\/.]+)\.[^\s\/.]+

:

  • (?:[^\s\/]*\.)?

    - an optional sequence of 0+ characters, other than spaces, /

    followed by.

  • ([^\s\/.]+)

    - group 2 ( c

    ), which will match 1+ characters except spaces, /

    and.

  • \.

    - a .

  • [^\s\/.]+

    - 1 + characters other than spaces, /

    and .

    .

var detectUrls = function(value) {
      var retval = value;
      if(retval != null) {
        var urlRegex = /((?:\b(?:https?|ftp|file):\/\/)|www\.)(?:[^\s\/]*\.)?([^\s\/.]+)\.[^\s\/.]+(?:\/?[-A-Z0-9+&@#\/%?=~_|!:(),.;]*[-A-Z0-9+&@#\/%=~_|])?/ig;
        retval = value.replace(urlRegex, function (url,b,c) {
          var url2 = (b == 'www.') ?  'http://' +url : url;
          return '<a href="' + url2 + '" target="_blank">' + c + '</a>';
        });
      }
      return retval;
    };
    
var res  = detectUrls('http://indianexpress.com/article/india/ram-nath-kovind-for-president-which-parties-support-his-candidature-and-how-the-scales-weigh-4712714/  www.google.com');
console.log(res);
document.body.innerHTML = res;
Run codeHide result


+1


source






More articles:


All Articles