用链接替换URL或完全限定的域名

Question

我不擅长常规exp.我想将链接更改为文本中的超链接

例如

Hello http://stackoverflow.com
Hello www.stackoverflow.com

我想要stackoverflow链接

Hello <a href='http://stackoverflow.com'>http://stackoverflow.com</a>
Hello <a href='http://www.stackoverflow.com'>www.stackoverflow.com</a>

我用过这个

var exp = /(\b(https?|ftp|file|):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        return str.replace(exp,"<a href='$1' target='_blank'>$1</a>"); 

但这只是http://

预先感谢

Answer 1

正如其他人所说,首先你需要定义什么是"链接".(请注意,"link"只是此上下文中"超链接"的缩写,因此您的句子没有意义.)考虑到您的两个示例,您希望匹配统一资源标识符(URI)和完全限定的域名(FQDN)代替.

为此,您应该使用RFC 3986附录B中的正则表达式-

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?

- 并将其更改为与字边界匹配的一个,仅接受FQDN和后面的可选端口号//,并在空格(\s)处停止:

      ,----scheme----.   ,-Fully Qualified Domain Name-.,-port.,--path--.,---query----.,fragment
      |              |   |                             ||     ||        ||            ||       |
(^|\s)(([^:/?#\s]+):)?(//([A-Za-z0-9-]+\.)+[A-Za-z0-9-]+(:\d+)?([^?#\s]*)(\?([^#\s]*))?(#(\S*))?

然后你可以使方案部分可选 -

                          |
                          v
(^|\s)((([^:/?#\s]+):)?//)?(([A-Za-z0-9-]+\.)+[A-Za-z0-9-]+(:\d+)?([^?#\s]*)(\?([^#\s]*))?(#(\S*))?

- 并将其写为正则表达式文字(表达式中的斜杠需要在作为分隔符时进行转义):

/(^|\s)((([^:\/?#\s]+):)?\/\/)?(([A-Za-z0-9-]+\.)+[A-Za-z0-9-]+)(:\d+)?([^?#\s]*)(\?([^#\s]*))?(#(\S*))?/

(您可能也希望匹配IDN ; JSX:regexp.js及其对Unicode字符属性的支持可以帮助您,请参阅如何从字符串中删除所有字符.并且您可能希望在FQDN子表达式前面添加子表达式URI中用户名的可选和弃用传输(\w+@)?,用于代理访问.)

然后你可以替换所有g与相应a元素匹配的字符串(lobal修饰符):

var rx = /(^|\s)(((([^:\/?#\s]+):)?\/\/)?(([A-Za-z0-9-]+\.)+[A-Za-z0-9-]+)(:\d+)?([^?#\s]*)(\?([^#\s]*))?(#(\S*))?)/g;

str = str.replace(rx,
  function (match, optionalWhitespace, uri, scheme, p4, protocol, fqdn, p7, port,
            path, query, queryVal, fragment, fragId) {
    return (optionalWhitespace ? optionalWhitespace : '')
      + '<a href="' + (protocol ? uri : 'http://' + uri)
      + '" target="_blank">' + uri + '<\/a>';
  });

你必须假设当你只看到一个FQDN前缀时,它是一个不安全的网站的域名,并且是前置的http://.否则,href属性中的URI引用将引用您网站中可能存在的路径,该路径具有域名作为其名称(http://your-site.example/other-site.example.com),这可能不是您想要的.

这种表达式在你的情况下匹配太多是可能的,但不太可能; 使用尽可能多的输入进行测试,并根据需要进行调整.如果向后兼容性不是问题,请使用非捕获括号((?:…))来提高效率和减少命名参数; 有关详细信息,请参阅ECMAScript支持列表.

捕获FQDN部分 - 括号周围([A-Za-z0-9-]+\.)+[A-Za-z0-9-]+- 是可选的; 您可能希望使用它来为a元素赋予一个class属性值,以便以特殊方式对其进行格式化,例如预先添加一个拟合图标,例如,用于指向Stack Overflow,Wikipedia,Twitter或Facebook的链接.

您可能还想重新考虑使用该target属性(对于Strict(X)HTML,您必须将其删除).用户可能不善待无法控制链接目标的打开位置.提供标题,图标,光标等形式的提示.