JavaScript实现http地址自动检测并添加URL链接
来源:互联网 发布:vr360全景软件 编辑:程序博客网 时间:2024/05/21 09:17
一、
给http字符自动添加URL链接是比较常见的一项功能。举两个我最近常用到的自动检测http://地址并添加链接的例子吧,首先是QQ邮箱,在使用QQ邮箱时,如果输入了URL地址(http://或是https://开头),则QQ邮箱会自动给这个地址添加可打开的链接。如下图所示:
还有就是微博客产品,例如twitter(zxx://翻墙可以follow苍井空姐姐哦~~ ^_^),或是国产的新浪微博。当您的微博信息中有类似于http://www.zhangxinxu.com/的URL地址时,当信息发布后,这些地址会自动可链接,而不单单是个普通文字而已,见下面的测试:
当这段信息发布后,显示为:
当我的粉丝点击这个链接的时候就可以访问我的这篇文章了。
二、URL地址自动添加的实现
URL地址自动添加的实现其实就是那么点内容:检测与替换。
检测
“检测”就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现。
验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
前一部分匹配http或是https开头的URL字符串地址,后面一部分匹配一些字符,英文字符、下划线(_)、点号(.)、问号(?)以及等号(=),连接短线(-)等。
替换
说到JavaScript中的替换功能,首先想到的自然是replace属性了,replace属性强大之处在于其支持正则表达式,可以对符合正则的字符串进行替换。例如,我们要替换掉字符串两端的空格就可以使用类似下面的语句:
var s = " blank ";s = s.replace(/^\s+(.*?)\s+$/, "");alert(s);
就会得到”blank”,两端的空格被剔除了。同样的,这里只要将匹配的http地址替换成<a>标签嵌套的含有href属性的http地址就可以了。
现在有个问题是,如何高效的获取匹配的字符串呢。在正则表达式中,有个叫做分组及反向引用的概念。例如有个RegExp构造函数,在调用了test()方法后,所有的反向引用都被保存在这个RegExp构造函数中,从RegExp.$1(它保存了第一个反向引用)开始,如果还有第二个反向引用,就是RegExp.$2,如果还有第三个,就是RegExp.$3,依次类推。
反向引用也可以用在String对象的replace方法中,也就是本文用到的字符串替换的方法中,所以我们就可以使用$1 $2来获取正则表达式的分组内容,实现高效的正则替换。参见如下代码:
var v = "欢迎访问我的个人网站:http://www.zhangxinxu.com/";v = v.replace(reg, "<a href='$1$2'>$1$2</a>"); //这里的reg就是上面的正则表达式alert(v);
结果会弹出类似下图的结果:
组合与提炼
根据上面的一些分析,现在我们可以把替换http://字符串的方法提炼出来,写成可继承的形式,见如下代码(方法名为httpHtml,适应于所有字符串):
String.prototype.httpHtml = function(){var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;return this.replace(reg, '<a href="$1$2">$1$2</a>');};var v = "欢迎访问我的个人网站:http://www.zhangxinxu.com/";alert(v.httpHtml());
结果这段代码显示的结果与上图几乎一致(引号的差异):
三、简单的实例
我们可以模拟新浪微博含http://内容的微博发布后的自动链接的实现。
您可以狠狠地点击这里:http地址自动添加链接demo
操作如下图所示:
您还可以修改文本域中的文字内容进行相应的测试。这里没有使用上面的httpHtml()方法,原因之一就是要对文本域中的换行进行处理。
(本篇完)
- JavaScript实现http地址自动检测并添加URL链接
- JavaScript实现http地址自动检测并添加URL链接
- JavaScript实现url地址自动检测并添加URL链接
- javascript获取url地址参数实现方法
- 链接地址无文件名的实现方式----URL重写技术http://hi.baidu.com/fuyujiang/blog/item/fdf8830aed20923ab0351d12.html
- javascript 字串自动添加 URL/EMAIL 链接 By shawl.qiu
- JavaScript获取链接url参数并生成对象
- Android添加url链接
- javascript 正则匹配url并添加<a>标签
- javascript验证URl地址
- liunx c实现http多线程下载2(url地址解析)
- php正则自动给 URL添加链接,并添加nofollow属性
- http链接url地址后进行POST、PUT、GET、DEL操作
- java获取一段文字的url地址并以链接的形式显示在网页上
- 自动检测SOCKET链接断开
- javascript接受url地址变量
- javascript 获取网页地址(url)
- curl 转译url地址为unicode码并前台javascript解析
- 你好,C++(21)只要天还没黑,就一直在工地干活-4.3.1 while循环:只要…就一直…
- 短小精悍的线性筛法求素数
- 第十三周项目 1 数组大折腾(4)——删除元素
- 修改firefox(火狐)默认源代码查看器
- 第十三周 项目一:数组大折腾(1.4)
- JavaScript实现http地址自动检测并添加URL链接
- 第十二周项目一——阅读程序(4)
- 第12周C++兄弟营团队学习情况记录表
- 国考报名查询系统 一、java project利用hibernate生成快速数据库的表
- 网络音视频通讯的并列模式视频录制
- 成为一名优秀黑客的12个基本步骤
- 世界首个数字武器:可以“隔山打牛”的震网病毒
- php 301域名重定向
- 第十三周oj平台项目一:逆序输出数