有谁知道可以选择所有对 URL 的文本引用并自动用指向这些位置的锚标记替换它们的脚本?
For example:
http://www.google.com
would automatically turn into
<a href="http://www.google.com">http://www.google.com</a>
注意:我想要这个是因为我不想浏览我的所有内容并用锚标签包装它们。
有谁知道可以选择所有对 URL 的文本引用并自动用指向这些位置的锚标记替换它们的脚本?
For example:
http://www.google.com
would automatically turn into
<a href="http://www.google.com">http://www.google.com</a>
注意:我想要这个是因为我不想浏览我的所有内容并用锚标签包装它们。
注意:此脚本的更新和更正版本现在可在https://github.com/maranomynet/linkify(GPL/MIT许可证)获得
嗯……对我来说,这似乎是 jQuery 的完美任务。
......这样的事情从我的脑海中浮现:
// Define: Linkify plugin
(function($){
var url1 = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g,
url2 = /(^|<|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|>|$)/g,
linkifyThis = function () {
var childNodes = this.childNodes,
i = childNodes.length;
while(i--)
{
var n = childNodes[i];
if (n.nodeType == 3) {
var html = $.trim(n.nodeValue);
if (html)
{
html = html.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(url1, '$1<a href="http://$2">$2</a>$3')
.replace(url2, '$1<a href="$2">$2</a>$5');
$(n).after(html).remove();
}
}
else if (n.nodeType == 1 && !/^(a|button|textarea)$/i.test(n.tagName)) {
linkifyThis.call(n);
}
}
};
$.fn.linkify = function () {
return this.each(linkifyThis);
};
})(jQuery);
// Usage example:
jQuery('div.textbody').linkify();
它尝试将以下所有出现的内容转换为链接:
www.example.com/path
http://www.example.com/path
mailto:me@example.com
ftp://www.server.com/path
<
... >
)享受 :-)
JQuery 不会在这里帮助你很多,因为你并不真正关心 DOM 遍历/操作(除了创建锚标记)。如果您所有的 URL 都在 <p class="url"> 标签中,那么也许。
一个普通的 JavaScript 解决方案可能就是你想要的,而且正如命运所愿,这个人应该为你提供帮助。
我有这个功能
textToLinks: function(text) {
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g;
return text.replace(re, "<a href=\"$1\" title=\"\">$1</a>");
}
我建议您在渲染到浏览器之前在静态页面上执行此操作,否则您会将转换计算的负担推给可怜的访问者。:) 以下是您在 Ruby 中的操作方法(从标准输入读取,写入标准输出):
while line = gets
puts line.gsub( /(^|[^"'])(http\S+)/, "\\1<a href='\\2'>\\2</a>" )
end
显然,您需要考虑如何使它像您希望的那样健壮。以上要求所有 URL 以 http 开头,并且将检查不转换引号中的 URL(即可能已经在 <a href="..."> 内)。它不会捕获 ftp://、mailto:。它会很高兴地在像 <script> 主体这样的地方转换材料,你可能不希望发生这种情况。
最令人满意的解决方案是与您的编辑手动进行转换,以便您可以观察并批准所有替换。 一个好的编辑器会让你用组引用(又名反向引用)进行正则表达式替换,所以这应该没什么大不了的。
看看这个 JQuery 插件:https : //code.google.com/p/jquery-linkifier/