如何用链接替换普通url ?

我正在使用下面的函数来匹配给定文本中的url，并将它们替换为HTML链接。正则表达式工作得很好，但目前我只替换了第一个匹配。

我怎么能替换所有的URL?我想我应该使用执行命令，但我并没有真正弄清楚如何做到这一点。

function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
return text.replace(exp,"<a href='$1'>$1</a>");
}
291756 次浏览
小开

用链接替换url(一般问题的答案)

问题中的正则表达式遗漏了边缘情况的很多。在检测URL时，最好使用专门的库来处理国际域名、诸如.museum这样的新顶级域名、括号和URL内部和末尾的其他标点符号，以及许多其他边缘情况。请参阅Jeff Atwood的博客文章 url的问题，以了解其他一些问题的解释。

URL匹配库的最佳摘要在Dan Dascalescu的回答+100
(截至2014年2月)

“使正则表达式替换多个匹配”(具体问题的回答)

在正则表达式的末尾添加一个“g”来启用全局匹配:

/ig;

但这只修复了正则表达式只替换第一个匹配的问题。不要使用那个代码。

小开

我不得不做相反的事情，并使html链接只是URL，但我修改了你的正则表达式，它的工作就像一个魅力，谢谢:)

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


source = source.replace(exp,"$1");
小开

谢谢，这对我很有帮助。我还希望能够链接看起来像URL的东西——作为基本需求，它将链接类似www.yahoo.com的东西，即使没有http://协议前缀。所以基本上，如果“www.”存在，它就会链接它，并假设它是http://.我还想让电子邮件变成mailto:链接。示例:www.yahoo.com将被转换为www.yahoo.com

下面是我最终得到的代码(结合了这个页面的代码和我在网上找到的其他东西，以及我自己做的其他东西):

function Linkify(inputText) {
//URLs starting with http://, https://, or ftp://
var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
var replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');


//URLs starting with www. (without // before it, or it'd re-link the ones done above)
var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
var replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');


//Change email addresses to mailto:: links
var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
var replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');


return replacedText
}

在第二次替换中，(^|[^/])部分只替换www.whatever.com，如果它还没有前缀//——以避免重复链接，如果一个URL已经在第一次替换中被链接。此外，www.whatever.com可能位于字符串的开头，这是正则表达式中该部分的第一个“或”条件。

这可以集成为一个jQuery插件，如Jesse P上面所示——但我特别想要一个常规的函数，它不作用于现有的DOM元素，因为我把我有文本，然后添加到DOM，我希望文本是“链接”之前，我添加它，所以我通过这个函数传递文本。伟大的工作。

小开

上面Travitron回答中的电子邮件检测对我来说不起作用，所以我用下面的c#代码扩展/替换了它。

// Change e-mail addresses to mailto: links.
const RegexOptions o = RegexOptions.Multiline | RegexOptions.IgnoreCase;
const string pat3 = @"([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,6})";
const string rep3 = @"<a href=""mailto:$1@$2.$3"">$1@$2.$3</a>";
text = Regex.Replace(text, pat3, rep3, o);

这允许像“firstname.secondname@one.two.three.co.uk”这样的电子邮件地址。

小开
最好的脚本来做这个: http://benalman.com/projects/javascript-linkify-process-lin/ < / p >
小开

我对Travis的代码做了一些小的修改(只是为了避免任何不必要的重新声明-但它对我的需求很好，所以做得很好!):

function linkify(inputText) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;


//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');


//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');


//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');


return replacedText;
}
小开

对Travis的Linkify()代码进行了一些优化。我还修复了子域类型格式的电子邮件地址不匹配的错误(即example@domain.co.uk)。

此外，我将实现更改为String类的原型，以便项目可以像这样匹配:

var text = 'address@example.com';
text.linkify();


'http://stackoverflow.com/'.linkify();

不管怎样，这是剧本:

if(!String.linkify) {
String.prototype.linkify = function() {


// http://, https://, ftp://
var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;


// www. sans http:// or https://
var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;


// Email addresses
var emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;


return this
.replace(urlPattern, '<a href="$&">$&</a>')
.replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
.replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
};
}
小开

我将Roshambo String.linkify()更改为emailaddressppattern以识别aaa.bbb.@ccc.ddd地址

if(!String.linkify) {
String.prototype.linkify = function() {


// http://, https://, ftp://
var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;


// www. sans http:// or https://
var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;


// Email addresses *** here I've changed the expression ***
var emailAddressPattern = /(([a-zA-Z0-9_\-\.]+)@[a-zA-Z_]+?(?:\.[a-zA-Z]{2,6}))+/gim;


return this
.replace(urlPattern, '<a target="_blank" href="$&">$&</a>')
.replace(pseudoUrlPattern, '$1<a target="_blank" href="http://$2">$2</a>')
.replace(emailAddressPattern, '<a target="_blank" href="mailto:$1">$1</a>');
};
}
小开

如果你需要显示更短的链接(仅域)，但具有相同的长URL，你可以尝试我对Sam Hasler的代码版本上面发布的修改

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

识别URL很棘手，因为它们经常被标点符号包围，而且用户经常不使用URL的完整形式。有很多JavaScript函数可以用超链接替换url，但我在基于python的web框架Django中找不到一个像urlize过滤器一样有效的函数。因此，我将Django的urlize函数移植到JavaScript:

https://github.com/ljosa/urlize.js

一个例子:

urlize('Go to SO (stackoverflow.com) and ask. <grin>',
{nofollow: true, autoescape: true})
=> "Go to SO (<a href="http://stackoverflow.com" rel="nofollow">stackoverflow.com</a>) and ask. &lt;grin&gt;"

第二个参数如果为真，则会插入rel="nofollow"。如果第三个参数为真，则转义HTML中具有特殊含义的字符。看到README文件。

小开

这个解决方案的工作原理和其他许多解决方案一样，实际上使用了与其中一个相同的正则表达式，但是它将返回一个包含a元素和任何适用文本节点的文档片段，而不是返回HTML String。

 function make_link(string) {
var words = string.split(' '),
ret = document.createDocumentFragment();
for (var i = 0, l = words.length; i < l; i++) {
if (words[i].match(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi)) {
var elm = document.createElement('a');
elm.href = words[i];
elm.textContent = words[i];
if (ret.childNodes.length > 0) {
ret.lastChild.textContent += ' ';
}
ret.appendChild(elm);
} else {
if (ret.lastChild && ret.lastChild.nodeType === 3) {
ret.lastChild.textContent += ' ' + words[i];
} else {
ret.appendChild(document.createTextNode(' ' + words[i]));
}
}
}
return ret;
}

有一些警告，即旧的IE和textContent支持。

在这里是一个演示。

小开

经过几个来源的输入，我现在有一个很好的解决方案。这与编写自己的替换代码有关。

回答。

小提琴。

function replaceURLWithHTMLLinks(text) {
var re = /(\(.*?)?\b((?:https?|ftp|file):\/\/[-a-z0-9+&@#\/%?=~_()|!:,.;]*[-a-z0-9+&@#\/%=~_()|])/ig;
return text.replace(re, function(match, lParens, url) {
var rParens = '';
lParens = lParens || '';


// Try to strip the same number of right parens from url
// as there are left parens.  Here, lParenCounter must be
// a RegExp object.  You cannot use a literal
//     while (/\(/g.exec(lParens)) { ... }
// because an object is needed to store the lastIndex state.
var lParenCounter = /\(/g;
while (lParenCounter.exec(lParens)) {
var m;
// We want m[1] to be greedy, unless a period precedes the
// right parenthesis.  These tests cannot be simplified as
//     /(.*)(\.?\).*)/.exec(url)
// because if (.*) is greedy then \.? never gets a chance.
if (m = /(.*)(\.\).*)/.exec(url) ||
/(.*)(\).*)/.exec(url)) {
url = m[1];
rParens = m[2] + rParens;
}
}
return lParens + "<a href='" + url + "'>" + url + "</a>" + rParens;
});
}
小开

< >强Reg例: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig < / p > 

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

下面是一些测试字符串:

  1. 请登录www.google.com找我
  2. www
  3. 找我到www.http://www.com
  4. 跟我来:http://www.nishantwork.wordpress.com
  5. http://www.nishantwork.wordpress.com
  6. 跟我来:http://www.nishantwork.wordpress.com
  7. https://stackoverflow.com/users/430803/nishant < a href = " https://stackoverflow.com/users/430803/nishant " > < / >
注意:如果你不想将www作为有效值传递，只需使用下面的reg ex: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig < / p >
小开
最佳答案

首先，滚动您自己的regexp来解析url是可怕的想法。你必须想象这是一个足够常见的问题，有人根据rfc的为它编写、调试和测试库。uri很复杂 -检查在Node.js中解析URL的代码和关于URI方案的维基百科页面。

在解析URL时，有大量的边缘情况:国际域名，实际的(.museum)和不存在的(.etc) tld，奇怪的标点符号，包括括号, URL结尾的标点符号，IPV6主机名等。

我已经查看了库的一吨，尽管有一些缺点，但有一些值得使用:

我很快就取消了这个任务的库:

如果你坚持使用正则表达式，最全面的是来自组件的URL regexp，尽管它会通过查看它错误地检测到一些不存在的双字母tld。

小开

保持简单!说你不能拥有的，而不是你能拥有的。

如上所述，url可能相当复杂，特别是在'?'，并不是所有的都以'www.'开头，例如maps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

所以，与其有一个不满足所有边缘情况的复杂正则表达式，而且很难维护，不如用这个更简单的正则表达式，它在实践中对我来说很好。

匹配

http(s):// (anything but a space)+

www. (anything but a space)+

Where 'anything' is [^'"<>\s] ．.． 基本上是一个贪婪匹配，继续满足您的空格，引号，尖括号，或行结束

另外:

记得检查它是不是URL格式，例如文本包含href="..."或src="..."

添加ref=nofollow(如果合适的话)

这个解决方案不像上面提到的库那样“好”，但是要简单得多，并且在实践中工作得很好。

if html.match( /(href)|(src)/i )) {
return html; // text already has a hyper link in it
}


html = html.replace(
/\b(https?:\/\/[^\s\(\)\'\"\<\>]+)/ig,
"<a ref='nofollow' href='$1'>$1</a>"
);


html = html.replace(
/\s(www\.[^\s\(\)\'\"\<\>]+)/ig,
"<a ref='nofollow' href='http://$1'>$1</a>"
);


html = html.replace(
/^(www\.[^\s\(\)\'\"\<\>]+)/ig,
"<a ref='nofollow' href='http://$1'>$1</a>"
);


return html;
小开

正确的URL检测与国际域名&星体角色的支持不是一件小事。linkify-it库从许多条件构建正则表达式，最终大小约为6千字节:)。它比目前在公认答案中引用的所有lib都更准确。

查看linkify-it演示检查所有的边界情况并测试你的。

如果需要链接HTML源代码，则应该首先解析它，然后分别迭代每个文本标记。

小开

用HTML链接替换文本中的url，忽略href/pre标记中的url。 https://github.com/JimLiu/auto-link < / p >

小开

我还编写了另一个JavaScript库，它可能对您更好，因为它非常敏感，误报最少，速度快，规模小。我目前正在积极维护它，所以请测试它在演示页面，看看它如何为你工作。

链接:https://github.com/alexcorvi/anchorme.js

小开

我在谷歌上搜索了最新的消息，发现了这个:

$('p').each(function(){
$(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') );
});

演示: http://jsfiddle.net/kachibito/hEgvc/1/

工作真的很好，正常的链接。

小开
关于URI复杂性的警告应该被注意，但是你的问题的简单答案是:
要替换每个匹配项，你需要在RegEx的末尾添加/g标志:
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi < / p >
小开

以下是我的解决方案:

var content = "Visit https://wwww.google.com or watch this video: https://www.youtube.com/watch?v=0T4DQYgsazo and news at http://www.bbc.com";
content = replaceUrlsWithLinks(content, "http://");
content = replaceUrlsWithLinks(content, "https://");


function replaceUrlsWithLinks(content, protocol) {
var startPos = 0;
var s = 0;


while (s < content.length) {
startPos = content.indexOf(protocol, s);


if (startPos < 0)
return content;


let endPos = content.indexOf(" ", startPos + 1);


if (endPos < 0)
endPos = content.length;


let url = content.substr(startPos, endPos - startPos);


if (url.endsWith(".") || url.endsWith("?") || url.endsWith(",")) {
url = url.substr(0, url.length - 1);
endPos--;
}


if (ROOTNS.utils.stringsHelper.validUrl(url)) {
let link = "<a href='" + url + "'>" + url + "</a>";
content = content.substr(0, startPos) + link + content.substr(endPos);
s = startPos + link.length;
} else {
s = endPos + 1;
}
}


return content;
}


function validUrl(url) {
try {
new URL(url);
return true;
} catch (e) {
return false;
}
}
小开

试试下面的函数:

function anchorify(text){
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var text1=text.replace(exp, "<a href='$1'>$1</a>");
var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
return text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
}

alert(anchorify("Hola amigo! https://www.sharda.ac.in/academics/"));

小开

尝试以下解决方案

function replaceLinkClickableLink(url = '') {
let pattern = new RegExp('^(https?:\\/\\/)?'+
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+
'((\\d{1,3}\\.){3}\\d{1,3}))'+
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
'(\\?[;&a-z\\d%_.~+=-]*)?'+
'(\\#[-a-z\\d_]*)?$','i');


let isUrl = pattern.test(url);
if (isUrl) {
return `<a href="${url}" target="_blank">${url}</a>`;
}
return url;
}
小开 
/**
* Convert URLs in a string to anchor buttons
* @param {!string} string
* @returns {!string}
*/


function URLify(string){
var urls = string.match(/(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)/g);
if (urls) {
urls.forEach(function (url) {
string = string.replace(url, '<a target="_blank" href="' + url + '">' + url + "</a>");
});
}
return string.replace("(", "<br/>(");
}

< a href = " https://codepen。io/zuhairtaha/pen/NmbGKJ" rel="noreferrer">简单示例 . io/zuhairtaha/pen/NmbGKJ" rel="noreferrer">简单示例

小开

对我有用:

var urlRegex =/(\b((https?|ftp|file):\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?)/ig;


return text.replace(urlRegex, function(url) {
var newUrl = url.indexOf("http") === -1 ? "http://" + url : url;
return '<a href="' + newUrl + '">' + url + '</a>';
});

提交答案