JavaScript实现url地址自动检测并添加URL链接示例代码


Posted in Javascript onNovember 12, 2013

背景:写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签。
实现代码:

String.prototype.httpHtml = function(){ 
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; 
return this.replace(reg, '<a target=_blank href="$1$2">$1$2</a>'); 
};

摘录:
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);
Javascript 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
js实现小时钟效果
Mar 25 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
js实现电灯开关效果
Jan 19 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 #Javascript
屏蔽script注入小例子
Nov 12 #Javascript
js控制淡入淡出示例代码
Nov 12 #Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 #Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 #Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 #Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
PHP防注入安全代码
2008/04/09 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
webpack之devtool详解
2018/02/10 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python 装饰器深入理解
2017/03/16 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python GUI模拟实现计算器
2020/06/22 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
高中生期末评语
2014/01/28 职场文书
疾病捐款倡议书
2014/05/13 职场文书
公司委托书怎么写
2014/08/02 职场文书
党员志愿者活动方案
2014/08/28 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
mysql 子查询的使用
2022/04/28 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python