angularjs - 如何从正则表达式显示 url 提供商名称

Question

我有这样的需求，

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

现在显示整个链接，现在的要求是，仅显示 indianexpress(当我单击此链接时，它应该导航)

代码是:

     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);

我使用 url2 显示整个链接(上面)

Answer 1

我建议将正则表达式的各个部分重新分组，使其仅具有 2 个相关的捕获组，一个用于协议(protocol)，另一个用于具有任何子域的域名。 模式是

• ((?:\b(?:https?|ftp|file):\/\/)|www\.) - 第 1 组 (b) :
  • (?:\b(?:https?|ftp|file):\/\/) - 单词边界后跟 http 或 https、ftp 或 file，后跟 ://
  • | - 或
  • www\. - www. 子字符串
• ([^\s\/]+) - 第 2 组 (c):除空格和 /< 之外的 1 个以上字符/里>
• (?:\/?[-A-Z0-9+&@#\/%?=~_|!:(),.;]*[-A-Z0-9+&@ #\/%=~_|])? - 可选序列:
• \/? - 1 或 0 /s
• [-A-Z0-9+&@#\/%?=~_|!:(),.;]* - 字符类中定义的 0 个或多个字符<
• [-A-Z0-9+&@#\/%=~_|] - 来自已定义类的 1 个单个字符。

然后，代码将如下所示

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;

要仅显示名称，您需要稍微调整正则表达式，([^\s\/]+) 将更改为 (?:[^\s\/]*\.)?([^\s\/.]+)\.[^\s\/.]+:

• (?:[^\s\/]*\.)? - 除空格之外的 0+ 个字符的可选序列， / 后跟 .
• ([^\s\/.]+) - 第 2 组 (c) 将匹配 1+ 个除空格之外的字符，/ 和 .
• \. - 一个.
• [^\s\/.]+ - 除空格、/ 和 . 之外的 1 个以上字符。

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;